@luxfi/ui 8.1.0 → 8.2.0

package/dist/site/components/footer.js

@@ -0,0 +1,126 @@
+import { NavItems } from '@hanzo/ui/primitives';
+import { Box, cn, css } from '@hanzo/ui';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { Logo as Logo$1, Wordmark } from '@luxfi/logo';
+
+// src/site/components/footer.tsx
+var FIRST = 2020;
+var Copyright = ({
+  className = ""
+}) => {
+  const year = (/* @__PURE__ */ new Date()).getFullYear();
+  const yearString = year > FIRST ? `${FIRST} - ${year}` : FIRST.toString();
+  return /* @__PURE__ */ jsxs(Box, { className, children: [
+    `Copyright \xA9 ${yearString}`,
+    "\xA0",
+    /* @__PURE__ */ jsx("br", { className: "sm:hidden" }),
+    "Lux Industries Inc.\xA0",
+    /* @__PURE__ */ jsx("br", { className: "md:hidden" }),
+    "\xA0All rights reserved."
+  ] });
+};
+var copyright_default = Copyright;
+
+// src/site/site-def/footer/legal.ts
+var legal = [
+  {
+    title: "Terms and Conditions",
+    href: "https://docs.google.com/document/d/1mvkjr1w8Rv8ttirs1mu-_2fw_PXclOyS/preview",
+    newTab: true
+  },
+  {
+    title: "Privacy Policy",
+    href: "https://docs.google.com/document/d/1vZjOKaNdOoThDIaVLERWxflQLtOsuvLn/preview",
+    newTab: true
+  }
+];
+var title = {
+  title: "Legal",
+  href: "",
+  variant: "linkFG"
+};
+[title, ...legal];
+var FooterNav = ({
+  items,
+  currentAs,
+  className = ""
+}) => /* @__PURE__ */ jsx(
+  NavItems,
+  {
+    items,
+    currentAs,
+    as: "nav",
+    className,
+    itemClx: (def) => def.variant === "linkFG" ? "font-nav text-[15px]/[1.3] font-medium tracking-normal text-muted-1 sm:hover:text-foreground transition-color duration-500" : "text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1 sm:hover:text-foreground transition-color duration-500"
+  }
+);
+var footer_nav_default = FooterNav;
+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__ */ jsxs(Fragment, { children: [
+    variant !== "wordmark" && /* @__PURE__ */ jsx(Logo$1, { variant: "white", size: s.mark }),
+    variant !== "mark" && /* @__PURE__ */ jsx(Wordmark, { height: s.word })
+  ] });
+  return href ? /* @__PURE__ */ jsx(Link, { href, style: css(clx), onClick, children: art }) : /* @__PURE__ */ jsx(Box, { tag: "span", className: clx, onClick, children: art });
+};
+var Footer = ({
+  siteDef,
+  className = "",
+  noHorizPadding = false
+}) => {
+  const { footer, aboveCopyright } = siteDef;
+  const smGridCols = Math.floor(footer.length / 2);
+  const smGridColsClx = `sm:grid-cols-${smGridCols} `;
+  const _aboveCopyright = typeof aboveCopyright === "undefined" ? legal : aboveCopyright;
+  return /* @__PURE__ */ jsxs(Box, { tag: "footer", className: cn("grow flex flex-col justify-between gap-6 pb-[2vh]", className), children: [
+    /* @__PURE__ */ jsxs(Box, { className: (noHorizPadding ? "" : "px-5 md:px-8 ") + "grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 " + smGridColsClx + "md:w-full sm:justify-items-center md:mx-0 lg:w-full md:flex md:flex-row md:justify-between px-[24px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "hidden lg:flex flex-col", children: /* @__PURE__ */ jsx(Logo, { size: "md", variant: "wordmark" }) }, 0),
+      footer.map((defs, index) => {
+        const xsColSpanClx = index === footer.length - 1 && footer.length % 2 === 1 ? "xs:col-span-2 xs:mx-auto md:col-span-1 md:mx-0 " : "";
+        return /* @__PURE__ */ jsx(
+          footer_nav_default,
+          {
+            items: defs,
+            currentAs: siteDef.currentAs,
+            className: cn(
+              "sm:min-w-[150px] md:min-w-0 flex flex-col justify-start items-start gap-[11px] sm:gap-[12px] md:gap-[15px] ",
+              xsColSpanClx
+            )
+          },
+          index + 1
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "md:mt-[2vh]", children: [
+      _aboveCopyright.length > 0 && /* @__PURE__ */ jsx(
+        NavItems,
+        {
+          items: _aboveCopyright,
+          as: "div",
+          className: "flex flex-row justify-center gap-4 mb-2",
+          itemClx: "text-sm text-center text-muted-2 underline hover:text-foreground"
+        }
+      ),
+      /* @__PURE__ */ jsx(copyright_default, { className: "text-sm text-center text-muted-3" })
+    ] })
+  ] });
+};
+var footer_default = Footer;
+
+export { footer_default as default };

package/dist/site/components/header/desktop-nav-menu.cjs

@@ -0,0 +1,170 @@
+'use strict';
+
+var React = require('react');
+var Link = require('next/link');
+var ui = require('@hanzo/ui');
+var primitives = require('@hanzo/ui/primitives');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Link__default = /*#__PURE__*/_interopDefault(Link);
+
+var DesktopNav = ({ links, isMenuOpened, setIsMenuOpen }) => {
+  React__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 = React__namespace.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+  const handleMouseLeave = React__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(Link__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(Link__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(Link__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 = React__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));
+};
+
+module.exports = desktop_nav_menu_default;

package/dist/site/components/header/desktop-nav-menu.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { LinkDefExtended } from '../../site-def/main-nav';
+declare const DesktopNav: React.FC<{
+    links: LinkDefExtended[];
+    isMenuOpened: boolean;
+    setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export default DesktopNav;
+//# sourceMappingURL=desktop-nav-menu.d.ts.map

package/dist/site/components/header/desktop-nav-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"desktop-nav-menu.d.ts","sourceRoot":"","sources":["../../../../src/site/components/header/desktop-nav-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAa,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAWzE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CAC7D,CAoHA,CAAA;eAEc,UAAU"}

package/dist/site/components/header/desktop-nav-menu.js

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import Link from 'next/link';
+import { Box, cn, css } from '@hanzo/ui';
+import { NavigationMenuLink, NavigationMenu, NavigationMenuList, NavigationMenuItem, navigationMenuTriggerStyle, NavigationMenuTrigger, NavigationMenuContent } from '@hanzo/ui/primitives';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DesktopNav = ({ links, isMenuOpened, setIsMenuOpen }) => {
+  React.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 = React.useCallback(() => {
+    setIsMenuOpen(true);
+  }, [setIsMenuOpen]);
+  const handleMouseLeave = React.useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+  const handleContentMouseMove = () => {
+    setIsMenuOpen(false);
+  };
+  const menuHiddenClass = !isMenuOpened ? "invisible" : "";
+  return links.length > 0 ? /* @__PURE__ */ jsx(NavigationMenu, { children: /* @__PURE__ */ jsx(NavigationMenuList, { children: links.map((el, index) => /* @__PURE__ */ jsx(NavigationMenuItem, { className: "!m-0", children: el.isAIMenu ? /* @__PURE__ */ jsx(Link, { href: el.href, style: css(cn(navigationMenuTriggerStyle(), " text-muted-1 bg-transparent")), children: el.title }) : el.title === "Cards" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: /* @__PURE__ */ jsx(Link, { href: el.href, children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavigationMenuContent,
+      {
+        className: 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__ */ jsx("div", { className: "flex justify-center items-start", children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavigationMenuTrigger,
+      {
+        className: "text-muted-1 bg-transparent",
+        onMouseEnter: handleMouseEnter,
+        onFocus: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onBlur: handleMouseLeave,
+        children: el.href && el.href !== "" ? /* @__PURE__ */ jsx(Link, { href: el.href, children: el.title }) : /* @__PURE__ */ jsx(Fragment, { children: el.title })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavigationMenuContent,
+      {
+        className: 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__ */ 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 = React.forwardRef(({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+  Box,
+  {
+    tag: "a",
+    ref,
+    className: 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__ */ jsx("div", { className: "text-sm font-medium leading-none", children: title }),
+      /* @__PURE__ */ 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__ */ jsxs(Box, { className: cn("py-4 px-4 ", getChildExtraClass(index)), children: [
+    /* @__PURE__ */ jsx("h2", { className: "text-muted-1", children: groupName }),
+    /* @__PURE__ */ jsx("ul", { className: "w-[200px] gap-3 md:w-[250px] lg:w-[250px]", children: childLinks.map((link) => /* @__PURE__ */ jsxs("div", { className: "flex justify-start items-center", children: [
+      link.icon,
+      /* @__PURE__ */ jsx(ListItem, { title: link.title, href: link.href, className: "ml-[14px]", children: link.contents }, link.title)
+    ] }, link.title)) })
+  ] }, groupName));
+};
+
+export { desktop_nav_menu_default as default };