@luxfi/ui 5.3.7

package/components/commerce/mobile-menu-toggle-button.tsx

@@ -0,0 +1,35 @@
+'use client'
+import React, { useState } from 'react'
+
+import { Plus } from 'lucide-react'
+
+import { Button } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const MobileMenuToggleButton: React.FC<{
+  open: boolean
+  setOpen: (b: boolean) => void
+  className?: string
+}> = ({
+  open,
+  setOpen,
+  className=''
+}) => {
+
+  return (
+    <Button 
+      variant='ghost' 
+      size='default' 
+      rounded='full' 
+      onClick={() => {setOpen(!open)}} 
+      className={cn('p-0 aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75', className)}
+    >
+      <Plus width={28} height={28} className={
+        'block h-full will-change-transform transition-transform transition-scale transition-duration-[1500] ' + 
+        (open ? 'rotate-[135deg] scale-110' : 'rotate-none')
+      } />
+    </Button>
+  )
+}
+
+export default MobileMenuToggleButton

package/components/commerce/mobile-nav-menu-ai.tsx

@@ -0,0 +1,51 @@
+'use client'
+import React, { useState } from 'react'
+import { ArrowRight, Plus } from 'lucide-react'
+import { Button, Card } from '@hanzo/ui/primitives'
+import { Logo } from '..'
+
+interface MobileNavMenuAIProps {
+    setMenuOpen: (open: boolean) => void
+}
+
+const MobileNavMenuAI: React.FC<MobileNavMenuAIProps> = ({ setMenuOpen }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false)
+
+    return (
+        <>
+            <div className="w-full  text-2xl cursor-pointer">
+                <div className='flex justify-between'>
+                    <Logo variant='text-only' size='md' outerClx={'p-6 h-full'} />
+                    <Plus width={28} height={28} className={
+                        'block h-full aspect-square hover:bg-background sm:hover:bg-level-1 active:scale-75 text-foreground will-change-transform transition-transform transition-scale transition-duration-[1500] mt-6 mr-6 ' +
+                        (!open ? 'rotate-none' : 'rotate-[135deg] scale-110')
+                    } onClick={() => setMenuOpen(false)} />
+                </div>
+                <div className="flex items-center gap-5 border-b border-[#3A3A3A] mt-4 rounded-full bg-muted-4 mx-6">
+                    <div className="text-muted-1 font-bold flex-1 flex justify-between min-h-12 items-center px-2" onClick={() => setIsOpen(true)}>
+                        <span className='text-base pl-2 font-light'>Ask AI a question</span>
+                        <ArrowRight />
+                    </div>
+                </div>
+            </div>
+            <div className={
+                'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+                'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+                (isOpen ? 'flex' : 'hidden')
+            }>
+                <Card className='flex flex-col h-full w-full'>
+                    <div className='flex px-4 py-2 h-16 bg-level-0 items-center justify-between'>
+                        <h3 className='font-semibold font-heading'>LUX<span className='opacity-60'>AI</span></h3>
+                        <Button onClick={() => setIsOpen(false)} variant='link' size='icon' className='w-fit sm:hidden'>
+                            <Plus className='w-6 h-6 flex-none mr-1 rotate-45 transition-transform' />
+                        </Button>
+                    </div>
+                    <iframe src="https://lux.chat/iframe" className='h-full' />
+                </Card>
+            </div>
+
+        </>
+    )
+};
+
+export default MobileNavMenuAI;

package/components/commerce/mobile-nav-menu-item.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import type { LinkDefExtended } from '../../site-def/main-nav'
+import { RightArrow } from '../icons'
+import LeftArrow from '../icons/left-arrow'
+import Link from 'next/link'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+
+interface MobileNavMenuItemProps {
+    link: LinkDefExtended,
+    setMenuOpen: (open: boolean) => void
+
+}
+
+const MobileNavMenuItem: React.FC<MobileNavMenuItemProps> = ({
+    link,
+    setMenuOpen
+}) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    return (
+        <>
+            <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl cursor-pointer" onClick={() => setIsOpen(true)}>
+                <span className='block w-[18px] h-[22px] items-center'>{link.icon}</span>
+                <span className='flex-1'>{link.title}</span>
+                <RightArrow className='' />
+            </div>
+            <div className={`fixed left-0 top-0 w-screen h-screen ${isOpen ? 'block' : 'hidden'}`} style={{ backgroundColor: 'black' }}>
+                <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl font-bold" onClick={() => setIsOpen(false)}>
+                    <LeftArrow />
+                    <span className="text-white">{link.title}</span>
+                </div>
+                <div className="flex flex-col">
+                    {link.childMenu?.map((menu, index) => {
+                        return (
+                            <Link href={menu.href}>
+                                <div className="w-full flex items-center px-5 py-3 gap-[27px] text-2xl" key={index}>
+                                    <span className='w-[18px] h-[22px] self-center flex items-center justify-center'>{menu.icon}</span>
+                                    <span className='flex-1'>{menu.title}</span>
+                                </div>
+                            </Link>
+                        )
+                    })}
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MobileNavMenuItem

package/components/commerce/mobile-nav-menu.tsx

@@ -0,0 +1,102 @@
+'use client'
+import React from 'react'
+import type { LinkDef } from '@hanzo/ui/types'
+import { cn } from '@hanzo/ui/util'
+import type { LinkDefExtended, ChildMenu } from '../../site-def/main-nav'
+import MobileNavMenuAI from './mobile-nav-menu-ai'
+import MobileNavMenuItem from './mobile-nav-menu-item'
+import MobileAuthWidget from './mobile-login-button'
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@hanzo/ui/primitives'
+import { ChevronDown } from 'lucide-react'
+import Link from 'next/link'
+
+const MobileNav: React.FC<{
+  currentAs: string | undefined
+  links: LinkDefExtended[]
+  className?: string
+  commonItemClx?: string | ((def: LinkDef) => string)
+  setChatbotOpen: (open: boolean) => void
+  setMenuOpen: (open: boolean) => void
+  setMenuState: (arg: 'closed' | 'nav' | 'login' | 'bag') => void
+}> = ({
+  currentAs,
+  links,
+  setMenuState,
+  className = '',
+  commonItemClx,
+  setChatbotOpen,
+  setMenuOpen
+}) => (
+    links.length > 0 ? (
+      <div className={cn('flex flex-col h-full', className)}>
+        <MobileNavMenuAI setMenuOpen={setMenuOpen} />
+        <div className="flex flex-col flex-1 overflow-auto">
+          <Accordion type="single" collapsible className='w-full h-full'>
+            {links.map((el, index) => {
+              const itemClx = (commonItemClx) ? (typeof commonItemClx === 'string' ? commonItemClx : commonItemClx(el)) : ''
+              const variant = el.variant ?? 'link'
+              let internalClx = variant === 'link'
+                ? ' text-muted hover:text-foreground active:text-accent rounded-none'
+                : ' min-w-0'
+
+              if (currentAs && currentAs === el.href) {
+                internalClx += ' pointer-events-none'
+                if (variant === 'link') {
+                  internalClx += ' text-accent'
+                }
+              }
+
+              if (!el.isAIMenu) {
+                return (
+                  <AccordionItem key={index} value={el.title ? el.title : ""} className='!no-underline !border-0 px-6'>
+                    <AccordionTrigger className={cn(internalClx, itemClx, '')}>
+                      <div className={cn(internalClx, itemClx, 'flex items-center justify-between w-full pl-3 text-base font-normal leading-6')}>
+                        {el.title}
+                      </div>
+                      <ChevronDown className="w-4 h-4 mr-3" />
+                    </AccordionTrigger>
+                    <AccordionContent>
+                      {el.childMenu && (
+                        <div className="px-4">
+                          {Object.entries(el.childMenu.reduce((acc, child) => {
+                            const group = acc[child.groupName ? child.groupName : ""] || []
+                            group.push(child)
+                            acc[child.groupName ? child.groupName : ""] = group
+                            return acc
+                          }, {} as { [key: string]: ChildMenu[] })).map(([groupName, children]) => (
+                            <div key={groupName}>
+                              <div className="mt-4 mb-4 font-light text-muted-1">{groupName}</div>
+                              {children.map((child, childIndex) => (
+                                <div key={childIndex} className="m-2">
+                                  <div className="flex items-center py-1">
+                                    <span>
+                                      {child.icon && child.icon}
+                                    </span>
+                                    <Link
+                                      href={child.href}
+                                      className="text-muted-2 hover:underline ml-5 hover:text-primary"
+                                      target={child.newTab ? '_blank' : '_self'}
+                                      rel="noopener noreferrer"
+                                    >
+                                      {child.title}
+                                    </Link>
+                                  </div>
+                                </div>
+                              ))}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                )
+              }
+            })}
+          </Accordion>
+        </div>
+        <MobileAuthWidget className='text-2xl z-10' handleLogin={() => { setMenuState('login') }} />
+      </div>
+    ) : null
+  );
+
+export default MobileNav;

package/components/contact-dialog/contact-form.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import React, { useTransition } from 'react'
+
+import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+  // @ts-ignore
+import validator from 'validator'
+
+import { Loader2 } from 'lucide-react'
+
+import {
+  Button,
+  Input,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@hanzo/ui/primitives'
+
+import type { SubmitServerAction } from '@hanzo/ui/types'
+import type { ContactInfo } from '../../types'
+
+const ContactFormSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "Email must be provided." })
+    .email("Invalid email."),
+  phone: z
+    .string()
+    .min(1, { message: "Telephone must be provided." })
+    .refine(validator.isMobilePhone, { message: "Invalid format." })
+})
+
+type ContactFormSchemaType = z.infer<typeof ContactFormSchema>
+
+const ContactForm: React.FC<{
+  onSubmit: (data: ContactFormSchemaType, enc: any) => void
+  enclosure: any
+}> = ({
+  onSubmit: _onSubmit,
+  enclosure
+}) => {
+
+  const form = useForm<ContactFormSchemaType>({
+    resolver: zodResolver(ContactFormSchema),
+    defaultValues: {
+      email: '',
+      phone: '',
+    },
+  })
+
+  const [isPending, startTransition] = useTransition()
+
+  const onSubmit: SubmitHandler<ContactFormSchemaType> = (data) => {
+    // https://github.com/orgs/react-hook-form/discussions/10757#discussioncomment-6672403
+    // @ts-ignore
+    startTransition(async () => {
+      await _onSubmit(data, enclosure)
+    })
+  }
+
+  const MyFormItem: React.FC<{ 
+    field: ControllerRenderProps<ContactFormSchemaType, 'email'> | ControllerRenderProps<ContactFormSchemaType, 'phone'>  
+    placeholder: string
+  }> = ({
+    field,
+    placeholder
+  }) => (
+  <FormItem className="space-y-0" >
+    <FormControl>
+      <Input placeholder={placeholder} {...field} className="mt-0 text-foreground"/>
+    </FormControl>
+    <div className="flex flex-row justify-start items-stretch gap-2">
+      <FormMessage />
+    </div>
+  </FormItem>
+)
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4">
+        <div className='flex flex-col justify-start items-stretch mt-4'>
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => ( <MyFormItem field={field} placeholder='email'/> )}
+        />
+        <FormField
+          control={form.control}
+          name='phone'
+            // @ts-ignore
+          render={({ field }) => ( <MyFormItem field={field} placeholder='phone'/> )}
+        />
+          <Button disabled={isPending} type='submit' className='bg-primary text-primary-fg hover:bg-primary-hover'>
+            {isPending ? (<>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Please wait
+              </>
+            ) : (
+              <>Submit</>
+            )}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+export default ContactForm

package/components/contact-dialog/disclaimer.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Disclaimer: React.FC = () => (
+  <div>
+    By entering your mobile number and submitting, you consent to receive text messages from Lux at the number provided. 
+    Message and data rates may apply. Message frequency varies. 
+    You can unsubscribe at any time by replying STOP. 
+    View our <a href='/privacy'>Privacy Policy</a> and <a href='/terms'>Terms & conditions</a>.
+  </div>
+)
+
+export default Disclaimer
+

package/components/contact-dialog/index.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import type { ButtonModalProps} from '@hanzo/ui/types'
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@hanzo/ui/primitives'
+
+import ContactForm from './contact-form'
+import Disclaimer from './disclaimer'
+
+const ContactDialog: React.FC<ButtonModalProps> = ({
+  open,
+  onOpenChange,
+  buttonText,
+  buttonProps,
+  title,
+  byline,
+  action,
+  actionEnclosure
+}) => {
+  const [success, setSuccess] = useState(false)
+
+  const onSubmit = async (formData: any, enclosure: any) => {
+    const result = await action(formData, enclosure)
+    if (result.success) {
+      setSuccess(true)
+    }
+  }
+  
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange} >
+      <DialogTrigger asChild>
+        <Button {...buttonProps} >{buttonText}</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px] p-0 gap-0 bg-background border">
+        <DialogHeader className='py-6 text-foreground'>
+          <DialogTitle className='text-4xl text-center text-inherit'>{title}</DialogTitle>
+          {byline && (<DialogDescription className='text-inherit text-lg text-center'>{byline} </DialogDescription>)}
+        </DialogHeader>
+        <div className='px-8 pb-8 rounded-e-lg flex flex-col justify-start items-center'>
+          {success ? (
+            <p>{actionEnclosure?.reply}</p>
+          ) : (
+            <ContactForm onSubmit={onSubmit} enclosure={actionEnclosure}/>
+          )}
+          <div className='text-muted-1 text-xs mt-4' >
+            <Disclaimer />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ContactDialog

package/components/copyright.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const FIRST = 2020
+
+const Copyright: React.FC<{
+  className?: string
+}> = ({
+  className=''
+}) => {
+
+  const year = new Date().getFullYear()
+  const yearString = (year > FIRST) ? `${FIRST} - ${year}` : FIRST.toString()
+
+  return (
+    <div className={className}>
+      {`Copyright © ${yearString}`}&nbsp;<br className='sm:hidden'/>Lux Partners Limited.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
+    </div>
+  )
+}
+
+export default Copyright

package/components/drawer-margin.tsx

@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+
+import { cn } from '@hanzo/ui/util'
+import { useCommerceDrawer } from '@luxfi/ui/commerce'
+import { observer } from 'mobx-react-lite'
+
+const DrawerMargin: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const drawer = useCommerceDrawer()
+  if (!drawer) {
+    throw new Error("DrawerMargin must be used with a CommerceUIContext!")
+  }
+  return (
+    <div 
+      className={cn('transition-height', clx)} 
+      style={{
+        height: drawer.state === 'micro' ? drawer.microHeight : 0
+      }}
+    />
+  )
+})
+
+export default DrawerMargin

package/components/footer.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+
+import type { LinkDef } from '@hanzo/ui/types'
+import { NavItems } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import Copyright from './copyright'
+import type { SiteDef } from '../site-def'
+import { legal } from '../site-def/footer/legal'
+import Logo from './logo'
+
+const Footer: React.FC<{
+  siteDef: SiteDef,
+  className?: string,
+  noHorizPadding?: boolean
+}> = ({
+  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 (
+    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+      <div 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]' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' variant='text-only' />
+        </div>
+        {footer.map((defs: LinkDef[], index: number) => {
+
+          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 (
+            <NavItems
+              items={defs} 
+              currentAs={siteDef.currentAs}
+              as='nav' 
+              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
+              )} 
+              key={index + 1}
+              itemClx={(def: LinkDef) => ((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'
+              )}
+            /> 
+          )
+        })}
+      </div>
+      <div className='md:mt-[2vh]'>
+      {_aboveCopyright.length > 0 && (
+        <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'}
+        />
+      )} 
+        <Copyright className='text-sm text-center text-muted-3'/>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
+// flex flex-col justify-between gap-6

package/components/header/desktop.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import { cn } from '@hanzo/ui/util'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import { Logo } from '..'
+
+import DesktopBagPopup from '../commerce/desktop-bag-popup'
+import BagButton from '../commerce/bag-button'
+import DesktopNav from '../commerce/desktop-nav-menu'
+
+
+import type { LinkDef } from '@hanzo/ui/types'
+
+const DesktopHeader: React.FC<{
+  currentAs: string | undefined
+  links: LinkDef[]
+  className?: string
+}> = ({
+  links,
+  className = ''
+}) => {
+    const [isMenuOpened, setIsMenuOpen] = React.useState(false);
+    const opendMenuClass = isMenuOpened ? " h-full" : ""
+
+    // TODO move 13px into a size class and configure twMerge to recognize say, 'text-size-nav' 
+    // (vs be beat out by 'text-color-nav')
+    return (
+      <header className={cn('bg-[rgba(0, 0, 0, 0.5)] !backdrop-blur-3xl fixed z-header top-0 left-0 right-0', className, opendMenuClass)} >
+        {/* md or larger */}
+        <div className={
+          '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' />
+          {/* md or larger */}
+          <div className='flex w-full gap-4 items-center justify-center'>
+            <DesktopNav links={links} isMenuOpened={isMenuOpened} setIsMenuOpen={setIsMenuOpen} />
+          </div>
+          <div className='flex items-center'>
+            <DesktopBagPopup popupClx='w-[340px]' trigger={<BagButton className='text-primary -mr-[3px] lg:min-w-0' />} />
+            <AuthWidget />
+          </div>
+        </div>
+      </header>
+    )
+  }
+
+export default DesktopHeader
+

package/components/header/index.tsx

@@ -0,0 +1,50 @@
+'use client'
+import React 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'
+
+const Header: React.FC<{
+  siteDef: SiteDef
+  className?: string
+}> = ({
+  siteDef,
+  className = ''
+}) => {
+
+    // TODO
+    const [open, setOpen] = React.useState<boolean>(false);
+
+    const { nav: { common, featured }, currentAs } = siteDef
+    const links = (featured) ? [...common, ...featured] : common
+    const isDesktopView = (): boolean => {
+      if (typeof window === 'undefined') return false 
+      return window.innerWidth > 768 
+    }
+
+    return (<>
+      <DesktopHeader
+        className={cn(className, 'hidden md:flex')}
+        links={links}
+        currentAs={currentAs}
+      />
+      <MobileHeader
+        className={cn(className, 'md:hidden')}
+        links={links}
+        currentAs={currentAs}
+        setChatbotOpen={setOpen}
+      />
+        <ChatWidget
+          title='LUX'
+          subtitle='AI'
+          chatbotUrl='https://lux.chat/iframe'
+          suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
+        />
+    </>)
+  }
+
+export default Header