@luxfi/ui 5.4.0 → 5.4.2

package/components/header/desktop.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { type PropsWithChildren } from 'react'
 
 import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
 
-import { Logo } from '..'
+import Logo, { type LogoVariant } from '../logo'
 
 import DesktopBagPopup from '../commerce/desktop-bag-popup'
 import BagButton from '../commerce/bag-button'
@@ -17,10 +17,13 @@ const DesktopHeader: React.FC<{
   links: LinkDef[]
   className?: string
   noAuth?: boolean
-}> = ({
+  logoVariant?: LogoVariant
+} & PropsWithChildren> = ({
   links,
   className = '',
-  noAuth=false
+  noAuth=false,
+  children,
+  logoVariant='text-only'
 }) => {
     const [isMenuOpened, setIsMenuOpen] = React.useState(false);
 
@@ -37,8 +40,8 @@ const DesktopHeader: React.FC<{
           'flex flex-row h-[80px] items-center justify-between ' +
           'mx-[24px] w-full max-w-screen'
         }>
-          <Logo size='md' href='/' outerClx='hidden lg:flex' key='two' variant='text-only' />
-          <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant='text-only' />
+          <Logo size={logoVariant === 'logo-only' ? 'lg' : 'md'} href='/' outerClx='hidden lg:flex' key='two' variant={logoVariant} />
+          <Logo size='sm' href='/' outerClx='hidden md:flex lg:hidden' key='one' variant={logoVariant} />
           {/* md or larger */}
           <div className='flex w-full gap-4 items-center justify-center'>
             <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
@@ -46,6 +49,7 @@ const DesktopHeader: React.FC<{
           <div className='flex items-center'>
             <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
             <AuthWidget noLogin={noAuth}/>
+            {children}
           </div>
         </div>
       </header>

package/components/header/index.tsx

@@ -1,19 +1,24 @@
 'use client'
-import React from 'react'
+import React, { type PropsWithChildren } from 'react'
 
 import type { SiteDef } from '../../site-def'
 
 import DesktopHeader from './desktop'
 import MobileHeader from './mobile'
 import { cn } from '@hanzo/ui/util'
-import { ChatWidget } from '../../components'
+import { type LogoVariant } from '../logo'
 
+
+  /** children will render furthest right */
 const Header: React.FC<{
   siteDef: SiteDef
   className?: string
-}> = ({
+  logoVariant?: LogoVariant
+} & PropsWithChildren> = ({
   siteDef,
-  className = ''
+  className = '',
+  children,
+  logoVariant='text-only'
 }) => {
 
     // TODO
@@ -28,13 +33,15 @@ const Header: React.FC<{
         links={links}
         currentAs={currentAs}
         noAuth={noAuth}
-      />
+        logoVariant={logoVariant}
+      >{children}</DesktopHeader>
       <MobileHeader
         className={cn(className, 'md:hidden')}
         links={links}
         currentAs={currentAs}
         setChatbotOpen={setOpen}
         noAuth={noAuth}
+        
       />
     </>)
   }

package/components/index.ts

@@ -5,7 +5,7 @@ export { default as Copyright} from './copyright'
 export { default as Footer } from './footer'
 export { default as Header } from './header'
 export * as Icons from './icons'
-export { default as Logo } from './logo'
+export { default as Logo, type LogoVariant } from './logo'
 export { default as Main } from './main'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'

package/components/logo.tsx

@@ -3,15 +3,15 @@ import Link from 'next/link'
 
 import { type TShirtSize  } from '@hanzo/ui/types'
 
-import { cn } from '@hanzo/ui/util'
-
 import * as Icons from './icons'
 
 const TEXT = 'LUX'
+type LogoVariant = 'text-only' | 'logo-only' | 'full'
+
 
 const Logo: React.FC<{
   size?: TShirtSize
-  variant?: 'text-only' | 'logo-only' | 'full'
+  variant?: LogoVariant
   onClick?: () => void
   href?: string
   outerClx?: string
@@ -86,4 +86,7 @@ const Logo: React.FC<{
   )
 }
 
-export default Logo
+export {
+  Logo as default,
+  type LogoVariant
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.4.0",
+  "version": "5.4.2",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -37,7 +37,6 @@
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
-    "@types/node": "^20.12.12",
     "@types/validator": "^13.12.1",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -51,18 +50,18 @@
     "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "*",
-    "@hanzo/commerce": "*",
-    "@hanzo/ui": "*",
+    "@hanzo/auth": "catalog:",
+    "@hanzo/commerce": "catalog:",
+    "@hanzo/ui": "catalog:",
     "@hookform/resolvers": "^3.3.2",
-    "lucide-react": "^0.344.0",
+    "lucide-react": "catalog:",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
-    "next": "15.0.1",
+    "next": "catalog:",
     "next-themes": "^0.2.1",
-    "react": "*",
-    "react-dom": "*",
-    "react-hook-form": "^7.51.4",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "catalog:",
     "validator": "^13.11.0",
     "zod": "3.23.8"
   },
@@ -73,15 +72,10 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/mdx": "^2.0.9",
-    "@types/node": "^20.11.24",
-    "@types/react": "*",
-    "@types/react-dom": "*",
-    "lucide-react": "^0.344.0",
-    "next-themes": "^0.2.1",
-    "react-hook-form": "^7.51.4",
-    "tailwindcss": "^3.4.3",
-    "typescript": "5.6.3",
-    "validator": "^13.11.0",
-    "zod": "3.23.8"
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "tailwindcss": "catalog:",
+    "typescript": "catalog:"
   }
 }