@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/header/desktop.cjs

@@ -0,0 +1,405 @@
+'use strict';
+
+var React4 = require('react');
+var ui = require('@hanzo/ui');
+var primitives = require('@hanzo/ui/primitives');
+var react = require('@hanzo/iam/react');
+var jsxRuntime = require('react/jsx-runtime');
+var Link2 = require('next/link');
+var logo = require('@luxfi/logo');
+var navigation = require('next/navigation');
+var lucideReact = require('lucide-react');
+var commerce = require('@hanzo/commerce');
+var mobx = require('mobx');
+var mobxReactLite = require('mobx-react-lite');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var Link2__default = /*#__PURE__*/_interopDefault(Link2);
+
+// src/site/components/header/desktop.tsx
+
+// src/site/components/auth/resume.ts
+var KEY = "lux-auth-resume";
+var remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search);
+};
+var Widget = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+  const { isAuthenticated, isLoading, login, logout } = react.useIam();
+  const identity = react.useIamIdentity();
+  if (isLoading) {
+    return null;
+  }
+  if (!isAuthenticated) {
+    return noLogin ? null : /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.Button,
+      {
+        variant: "primary",
+        className: ui.cn("h-8 w-fit !min-w-0", className),
+        onClick: handleLogin ?? (() => {
+          remember();
+          void login();
+        }),
+        children: "Login"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(primitives.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.Button,
+      {
+        variant: "outline",
+        size: "icon",
+        className: ui.cn("rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8", className),
+        children: identity?.initials
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverContent, { className: "bg-level-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 truncate", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium leading-none truncate", children: identity?.name }),
+        identity?.email && identity.email !== identity.name && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm opacity-50 truncate", children: identity.email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.Separator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.Button, { variant: "outline", onClick: () => {
+        logout();
+      }, children: "Logout" })
+    ] }) })
+  ] });
+};
+var AuthWidget = (props) => React4.useContext(react.IamContext) ? /* @__PURE__ */ jsxRuntime.jsx(Widget, { ...props }) : null;
+var widget_default = AuthWidget;
+var SIZE = {
+  xl: { mark: 40, word: 22, gap: "gap-4" },
+  lg: { mark: 40, word: 22, gap: "gap-4" },
+  md: { mark: 32, word: 18, gap: "gap-3" },
+  sm: { mark: 24, word: 13, gap: "gap-2" },
+  xs: { mark: 16, word: 9, gap: "gap-1.5" }
+};
+var Logo = ({
+  size = "md",
+  href,
+  // no default please!
+  outerClx = "",
+  variant = "full",
+  onClick
+}) => {
+  const s = SIZE[size] ?? SIZE.md;
+  const clx = "flex flex-row items-center " + s.gap + " " + (href ? "hover:opacity-80 cursor-pointer " : "cursor-default ") + outerClx;
+  const art = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Logo, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsxRuntime.jsx(logo.Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href, style: ui.css(clx), onClick, children: art }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "span", className: clx, onClick, children: art });
+};
+var BagIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { fill: "none", viewBox: "0 0 1019 1281", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m977.243 365.553h-175.407v-90.629c0-151.923-131.968-274.924-292.334-274.924-160.367 0-292.337 123.002-292.337 274.924v90.629h-175.4023c-23.3886 0-41.7627 17.051-41.7627 38.756v775.121c0 55.8 48.4456 100.76 108.582 100.76h801.84c60.138 0 108.578-44.96 108.578-100.76v-775.121c0-21.705-18.37-38.756-41.757-38.756zm-676.553-90.629c0-108.517 93.546-196.9408 208.812-196.9408 115.265 0 208.813 88.4218 208.813 196.9408v89.08h-417.625z", fill: "currentColor" }) });
+var bag_icon_default = BagIcon;
+
+// src/site/next/analytics/google-analytics.ts
+var sendGAEvent = (name, options = {}) => {
+  window.gtag("event", name, options);
+};
+var DesktopBagPopup = ({
+  triggerClx = "",
+  popupClx = "",
+  trigger
+}) => {
+  const cmmc = commerce.useCommerce();
+  const [bagOpen, setBagOpen] = React4.useState(false);
+  const router = navigation.useRouter();
+  React4.useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent("view_cart", {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: "USD"
+      });
+    }
+  }, [bagOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(primitives.Popover, { open: bagOpen, onOpenChange: setBagOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverTrigger, { className: triggerClx, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs(primitives.PopoverContent, { sideOffset: 28, className: ui.cn("relative  flex flex-col p-0 px-4 pb-4 pt-2", popupClx), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(primitives.PopoverClose, { className: "absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-5 h-5" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        commerce.CartPanel,
+        {
+          handleCheckout: () => {
+            router.push("/checkout");
+          },
+          className: "mt-4 mb-4 border-none py-0 px-4",
+          listClx: "rounded-sm pr-3",
+          scrollAfter: 5,
+          scrollHeightClx: "h-[70vh]",
+          itemClx: "mt-3",
+          totalClx: "sticky px-1 pr-2 -bottom-[1px] bg-level-1",
+          buttonClx: "max-w-[220px] flex-none",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center flex-none justify-center ", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(bag_icon_default, { className: "mr-2 relative w-6 h-7 fill-foreground " }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-heading text-foreground text-default", children: "Your Bag" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none" })
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var desktop_bag_popup_default = DesktopBagPopup;
+var BagButton = mobxReactLite.observer(({
+  showIfEmpty = false,
+  animateOnHover = true,
+  animateOnQuantityChange = true,
+  size = "default",
+  className = "",
+  iconClx = "",
+  onClick
+}) => {
+  const c = commerce.useCommerce();
+  const wiggleRef = React4.useRef(mobx.observable.box("none"));
+  React4.useEffect(() => (
+    // return IReactionDisposer
+    animateOnQuantityChange && c ? mobx.reaction(
+      () => c.cartQuantity,
+      (curr, prev) => {
+        if (curr > prev) {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("more");
+          });
+        } else {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("less");
+          });
+        }
+        setTimeout(() => {
+          mobx.runInAction(() => {
+            wiggleRef.current.set("none");
+          });
+        }, 800);
+      }
+    ) : void 0
+  ), []);
+  if (!c || !showIfEmpty && c.cartEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {});
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.Box,
+    {
+      "aria-label": "Bag",
+      role: "button",
+      onClick,
+      className: ui.cn(
+        primitives.buttonVariants({ variant: "ghost", size }),
+        "rounded-md",
+        // Overides the bg change on hover --not a "hover effect" 
+        "relative group p-0 aspect-square hover:bg-background",
+        wiggleRef.current.get() === "more" ? "item-added-to-cart-animation" : wiggleRef.current.get() === "less" ? "item-removed-from-cart-animation" : "",
+        className
+      ),
+      children: [
+        !c.cartEmpty && /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "z-above-content flex flex-col justify-center items-center  absolute left-0 right-0 top-0 bottom-0 leading-none font-sans font-bold text-primary-fg text-xs ", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[3px] w-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: c.cartQuantity })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(bag_icon_default, { width: "24", height: "28", className: ui.cn(
+          "relative -top-[3px] fill-primary",
+          iconClx,
+          animateOnHover ? "group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300" : ""
+        ), "aria-hidden": "true" })
+      ]
+    }
+  );
+});
+var bag_button_default = BagButton;
+var DesktopNav = ({ links, isMenuOpened, setIsMenuOpen }) => {
+  React4__namespace.useEffect(() => {
+    const preventScroll = (e) => {
+      e.preventDefault();
+    };
+    if (isMenuOpened) {
+      window.addEventListener("wheel", preventScroll, { passive: false });
+      window.addEventListener("touchmove", preventScroll, { passive: false });
+      window.addEventListener("keydown", preventScrollKeys, { passive: false });
+    } else {
+      window.removeEventListener("wheel", preventScroll);
+      window.removeEventListener("touchmove", preventScroll);
+      window.removeEventListener("keydown", preventScrollKeys);
+    }
+    return () => {
+      window.removeEventListener("wheel", preventScroll);
+      window.removeEventListener("touchmove", preventScroll);
+      window.removeEventListener("keydown", preventScrollKeys);
+    };
+  }, [isMenuOpened]);
+  const preventScrollKeys = (e) => {
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", " "].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+  const handleMouseEnter = React4__namespace.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+  const handleMouseLeave = React4__namespace.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+  const handleContentMouseMove = () => {
+    setIsMenuOpen(false);
+  };
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+  return links.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(primitives.NavigationMenu, { children: /* @__PURE__ */ jsxRuntime.jsx(primitives.NavigationMenuList, { children: links.map((el, index) => /* @__PURE__ */ jsxRuntime.jsx(primitives.NavigationMenuItem, { className: "!m-0", children: el.isAIMenu ? /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: el.href, style: ui.css(ui.cn(primitives.navigationMenuTriggerStyle(), " text-muted-1 bg-transparent")), children: el.title }) : el.title === "Cards" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: el.href, children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.NavigationMenuContent,
+      {
+        className: ui.cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "grid xl:grid-cols-3 w-full justify-center max-w-[750px]",
+            onMouseLeave: handleContentMouseMove,
+            children: GroupChildMenu({ childs: el.childMenu, isCards: true })
+          }
+        ) })
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: el.href && el.href !== "" ? /* @__PURE__ */ jsxRuntime.jsx(Link2__default.default, { href: el.href, children: el.title }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      primitives.NavigationMenuContent,
+      {
+        className: ui.cn("fixed left-0 top-14 pt-6 w-screen h-full border-0 !backdrop-blur-3xl bg-transparent mt-0", menuHiddenClass),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex flex-row w-full justify-center",
+            onMouseLeave: handleContentMouseMove,
+            children: GroupChildMenu({ childs: el.childMenu })
+          }
+        )
+      }
+    )
+  ] }) }, index)) }) }) : null;
+};
+var desktop_nav_menu_default = DesktopNav;
+var ListItem = React4__namespace.forwardRef(({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(primitives.NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  ui.Box,
+  {
+    tag: "a",
+    ref,
+    className: ui.cn(
+      "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:text-accent-foreground focus:bg-level-1 focus:text-accent-foreground text-muted-1 hover:text-primary hover:bg-transparent duration-1000 ease-in-out",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium leading-none", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-3 text-sm leading-snug text-muted-1", children })
+    ]
+  }
+) }) }, title));
+ListItem.displayName = "ListItem";
+var GroupChildMenu = (params) => {
+  const { childs, isCards = false } = params;
+  if (!childs) {
+    return null;
+  }
+  const groupedChildMenus = childs.reduce((grouped, childLink) => {
+    if (childLink.groupName) {
+      grouped[childLink.groupName] = grouped[childLink.groupName] || [];
+      grouped[childLink.groupName].push(childLink);
+    }
+    return grouped;
+  }, {});
+  const getChildExtraClass = (index) => {
+    if (isCards && (index === 3 || index === 4)) {
+      return "xl:-mt-32";
+    }
+    return "";
+  };
+  return Object.entries(groupedChildMenus).map(([groupName, childLinks], index) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: ui.cn("py-4 px-4 ", getChildExtraClass(index)), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-muted-1", children: groupName }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "w-[200px] gap-3 md:w-[250px] lg:w-[250px]", children: childLinks.map((link) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-start items-center", children: [
+      link.icon,
+      /* @__PURE__ */ jsxRuntime.jsx(ListItem, { title: link.title, href: link.href, className: "ml-[14px]", children: link.contents }, link.title)
+    ] }, link.title)) })
+  ] }, groupName));
+};
+var DesktopHeader = ({
+  links,
+  className = "",
+  noAuth = false,
+  noCommerce = false,
+  children,
+  logoVariant = "full"
+}) => {
+  const [isMenuOpened, setIsMenuOpen] = React4__namespace.default.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { tag: "header", id: "DESKTOP_HEADER", className: ui.cn(
+    "bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0",
+    className,
+    isMenuOpened ? " h-full" : ""
+  ), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { className: "flex flex-row h-[80px] items-center justify-between mx-[24px] w-full max-w-screen", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Logo, { size: logoVariant === "mark" ? "lg" : "md", href: "/", outerClx: "hidden lg:flex", variant: logoVariant }, "two"),
+    /* @__PURE__ */ jsxRuntime.jsx(Logo, { size: "sm", href: "/", outerClx: "hidden md:flex lg:hidden", variant: logoVariant }, "one"),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full gap-4 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(desktop_nav_menu_default, { links, isMenuOpened, setIsMenuOpen }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      !noCommerce && /* @__PURE__ */ jsxRuntime.jsx(desktop_bag_popup_default, { popupClx: "w-[340px]", trigger: /* @__PURE__ */ jsxRuntime.jsx(bag_button_default, { className: "text-primary -mr-[3px] lg:min-w-0" }) }),
+      !noAuth && /* @__PURE__ */ jsxRuntime.jsx(widget_default, {}),
+      children
+    ] })
+  ] }) });
+};
+var desktop_default = DesktopHeader;
+
+module.exports = desktop_default;

package/dist/site/components/header/desktop.css

@@ -0,0 +1,4 @@
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}

package/dist/site/components/header/desktop.d.ts

@@ -0,0 +1,13 @@
+import React, { type PropsWithChildren } from 'react';
+import { type LogoVariant } from '../logo';
+import type { LinkDef } from '@hanzo/ui/types';
+declare const DesktopHeader: React.FC<{
+    currentAs: string | undefined;
+    links: LinkDef[];
+    className?: string;
+    noAuth?: boolean;
+    noCommerce?: boolean;
+    logoVariant?: LogoVariant;
+} & PropsWithChildren>;
+export default DesktopHeader;
+//# sourceMappingURL=desktop.d.ts.map

package/dist/site/components/header/desktop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/desktop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAKrD,OAAa,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AAOhD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE9C,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAC5B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,GAAG,iBAAiB,CAuClB,CAAA;eAEY,aAAa"}