@hanzo/ui 0.5.10

package/blocks/def/image-block.ts

@@ -0,0 +1,36 @@
+import type { ImageDef } from '../../types'
+import type Block from './block'
+
+  /**
+   * See {@link ImageDef}
+   * see https://nextjs.org/docs/app/api-reference/components/image
+   * as well as React.ImgHTMLAttributes. 
+   */
+interface ImageBlock extends Block, ImageDef {
+  blockType: 'image'
+
+  /**
+   * Alignement: 'left' (default) / 'right' / 'center' (must be in flex-col parent)
+   * 'mobile-no-scale': By default, scales to 3/4 height (mobile and w < 'md')
+   * 'mobile-full-width': Overrides dim, etc. and renders full width (maintaining aspect ratio)
+   */
+  specifiers?: string
+    /** @deprecated Please use 'mobile-full-width' in specifiers  */
+  fullWidthOnMobile?: boolean
+    /** Next props */
+  props?: {
+    sizes?: string
+      /** if true, any alignement specifiers are ignored */
+    fill?: boolean  
+    style?: {
+      objectFit?: string
+      objectPosition?: string
+      width?: number | string
+      height?: number | string
+    }
+  }
+}
+
+export {
+  type ImageBlock as default,
+}

package/blocks/def/index.ts

@@ -0,0 +1,35 @@
+import type AccordianBlock from './accordian-block'
+import type Block from './block'
+import type BulletCardsBlock from './bullet-cards-block'
+import type CardBlock from './card-block'
+import type CarteBlancheBlock from './carte-blanche-block'
+import type CTABlock from './cta-block'
+import type ElementBlock from './element-block'
+import type GridBlock from './grid-block'
+import type GroupBlock from './group-block'
+import type EnhHeadingBlock from './enh-heading-block'
+import type HeadingBlock from './heading-block'
+import type ImageBlock from './image-block'
+import type VideoBlock from './video-block'
+import type SpaceBlock from './space-block'
+import { SPACE_DEFAULTS } from './space-block'
+import type ScreenfulBlock from './screenful-block'
+
+export { 
+   type AccordianBlock, 
+   type Block,
+   type BulletCardsBlock,
+   type CardBlock,
+   type CarteBlancheBlock,
+   type CTABlock,
+   type ElementBlock,
+   type GridBlock,
+   type GroupBlock,
+   type HeadingBlock,
+   type EnhHeadingBlock, 
+   type ImageBlock,
+   type VideoBlock,
+   type SpaceBlock,
+   type ScreenfulBlock,
+   SPACE_DEFAULTS
+}

package/blocks/def/screenful-block.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react'
+
+import type Block from './block'
+import type VideoBlock from './video-block'
+
+  /**
+   * A common screenful of content
+   * An optional banner image or video
+   * Content can be in columns
+   */
+interface ScreenfulBlock extends Block {
+  blockType: 'screenful'
+
+
+    /**
+     * Either an image URL, or a Video Block
+     * 
+     * If VideoBlock, then it's poster will be rendered server-side
+     * and the <video> component will be lazy-loaded client-side.
+     * 
+     * If in a scrolling situation, the video will autoplay when 75% in view
+     */
+  banner?: string | VideoBlock 
+    
+    /** Specifies rendering and layout hints and variants for block as a whole */ 
+  specifiers?: string
+
+    /** Specifies rendering and layout hints and variants for corresponding column */ 
+  columnSpecifiers?: string[]
+
+    /**
+     * Mobile: The order in the single column mobile layout in which the columns appear.
+     * Overrides column order.
+     * eg, if you want the second tile of three at the top: [1, 0, 2] 
+     */
+  mobileOrder?: number[]
+
+    /**
+     * Content Blocks for 1-3 columns. 
+     * (More than that is allowed, but impractical at many resolutions!) 
+     * If > 1, it will be enclosed in a 'grid grid-cols-<x>' div. 
+     */
+  contentColumns: Block[][]
+
+    /** optional footer element below the grid */
+  footer?: ReactNode
+}
+
+export {
+  type ScreenfulBlock as default
+}

package/blocks/def/space-block.ts

@@ -0,0 +1,64 @@
+import type { Breakpoint } from '../../types'
+
+import type Block from './block'
+
+type TWSpaceUnit = number // TODO, pull from tw conf 
+type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6
+
+const SPACE_DEFAULTS = {
+  xs: 2,
+  sm: 4,
+  md: 5,
+  lg: 6,
+  xl: 8
+} satisfies {
+  [key in (Breakpoint)]?: TWSpaceUnit
+}
+
+
+interface SpaceBlock extends Block {
+  blockType: 'space'
+
+  /**
+   * TW units of vertical space, applied at Breakpoints
+   * or
+   * if just a number, that number at all Breakpoints
+   * 
+   * default {
+   *  xs: 2,
+   *  sm: 4,
+   *  md: 5,
+   *  lg: 6,
+   *  xl: 8
+   * }
+   * 
+   * Any provided values will be merge w the defaults
+   * And applied as if they were tw classes in ascending
+   * order. 
+   * 
+   * impl: <div className='invisible w-[1px] xs:h-<xsval> sm:h-<smval> etc...' />
+   */
+  sizes?: {
+    [key in (Breakpoint)]?: TWSpaceUnit
+  } | TWSpaceUnit
+
+  /**
+   * Heading levels.  Gives the vertical space that the corresponding
+   * h tag would give. 
+   * default: 3 (height of <h3>) 
+   * 0 = 1rem (plus any gaps), 
+   * For example, 1 = <h1 style={visibility: hidden}>&nbsp;</h1> 
+   *   As <ApplyTypography> would render it, plus any gap.
+   */
+  level?: HeadingLevel
+
+  test?: boolean
+
+}
+
+export {
+  type SpaceBlock as default,
+  type TWSpaceUnit,
+  type HeadingLevel,
+  SPACE_DEFAULTS
+}

package/blocks/def/video-block.ts

@@ -0,0 +1,28 @@
+import type { TShirtDimensions } from '../../types'
+import type Block from './block'
+
+interface VideoBlock extends Block {
+  blockType: 'video'
+  videoProps?: any   // For example,
+    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      videoProps: {
+        autoPlay: true, 
+        loop: true, 
+        muted: true, 
+        playsInline: true
+      }, 
+
+      Valueless props are boolean.  
+      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
+    ~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+  poster?: string      
+  sources?: string[]
+  dim: TShirtDimensions 
+    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
+  sizing?: any
+}
+
+export {
+  type VideoBlock as default,
+}

package/blocks/index.ts

@@ -0,0 +1,2 @@
+export * from './def'
+export * from './components'

package/common/chat-widget.tsx

@@ -0,0 +1,75 @@
+'use client'
+import React from 'react'
+
+import { X } from 'lucide-react'
+
+import LuxLogo from './icons/lux-logo'
+import { Button, Card } from '../primitives'
+
+const ChatWidget: React.FC<{
+  title: string,
+  chatbotUrl: string,
+  subtitle?: string,
+  question?: string,
+  /* 
+    Currently supports these icons from remix icons (https://remixicon.com/):
+      GlobalLineIcon,
+      ShieldFlashLineIcon,
+      BankCardLineIcon,
+      GroupLineIcon,
+      QuestionnaireLineIcon
+  */
+  suggestedQuestions?: { heading: string, message: string, icon?: string }[]
+}> = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions
+}) => {
+
+  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
+
+  const onClick = () => { setShowChatbot(!showChatbot) }
+
+  const searchParams = new URLSearchParams()
+  if (question) {
+    searchParams.append('question', question)
+  }
+  if (suggestedQuestions) {
+    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
+    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
+    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
+  }
+
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
+
+  return (<>
+    <div className={
+      'fixed bottom-0 sm:bottom-20 right-0 w-full h-full ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1001] ' +
+      (showChatbot ? 'flex' : 'hidden')
+    }>
+      <Card className='flex flex-col h-full w-full'>
+        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
+          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
+          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
+            <X />
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </div>
+
+    <Button
+      variant='outline'
+      size='link'
+      onClick={onClick}
+      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full'
+    >
+      {showChatbot ? <X /> : <LuxLogo width={24} height={24} className='mt-2' />}
+    </Button>
+  </>)
+}
+
+export default ChatWidget

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

@@ -0,0 +1,111 @@
+'use client'
+
+import React, { useTransition } from 'react'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm, type SubmitHandler, type ControllerRenderProps } from 'react-hook-form'
+import * as z from 'zod'
+  // @ts-ignore
+import validator from 'validator'
+
+import { Loader2 } from 'lucide-react'
+
+import {
+  Button,
+  Input,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '../../primitives'
+
+import type { ContactInfo, SubmitServerAction } from '../../types'
+
+const ValidationSchema = 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." })
+})
+
+const ContactForm: React.FC<{
+  onSubmit: SubmitServerAction
+  enclosure: any
+}> = ({
+  onSubmit,
+  enclosure
+}) => {
+
+  const form = useForm<ContactInfo>({
+      // @ts-ignore (pnpm linking / tsc bug )
+    resolver: zodResolver(ValidationSchema),
+    defaultValues: {
+      email: '',
+      phone: '',
+    },
+  })
+
+  const [isPending, startTransition] = useTransition()
+
+  const onFormSubmit: SubmitHandler<ContactInfo> = (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<ContactInfo, 'email'> | ControllerRenderProps<ContactInfo, '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(onFormSubmit)} className="w-3/4">
+        <div className='flex flex-col justify-start items-stretch mt-4'>
+        <FormField
+          control={form.control}
+          name='email'
+            // @ts-ignore
+          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/common/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='/assets/standard-docs/LUX-Privacy-Policy.pdf'>Privacy Policy</a> and <a href='/assets/standard-docs/LUX-NFT-Terms-and-Conditions.pdf'>Terms & conditions</a>.
+  </div>
+)
+
+export default Disclaimer
+

package/common/contact-dialog/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+
+import type { ButtonModalProps} from '../../types'
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../primitives'
+
+import ContactForm from './contact-form'
+import Disclaimer from './disclaimer'
+
+const ContactDialog: React.FC<ButtonModalProps> = ({
+  open,
+  onOpenChange,
+  buttonText,
+  buttonProps,
+  title,
+  byline,
+  action,
+  actionEnclosure
+}) => (
+  <Dialog open={open} onOpenChange={onOpenChange} >
+    <DialogTrigger asChild>
+      <Button {...buttonProps} >{buttonText}</Button>
+    </DialogTrigger>
+    <DialogContent className="sm:max-w-[500px] p-0 gap-0 light-theme">
+      <DialogHeader className='py-6  text-foreground'>
+        <DialogTitle className='text-4xl font-heading text-center text-inherit'>{title}</DialogTitle>
+        {byline && (<DialogDescription className='text-inherit text-xl text-center'>{byline} </DialogDescription>)}
+      </DialogHeader>
+      <div className='p-8 rounded-e-lg flex flex-col justify-start items-center'>
+        <ContactForm onSubmit={action} enclosure={actionEnclosure}/>
+        <div className='text-muted-1 text-xs mt-4' >
+          <Disclaimer />
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+)
+
+export default ContactDialog

package/common/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 Ltd.&nbsp;<br className='md:hidden'/>&nbsp;All rights reserved.
+    </div> 
+  )
+}
+
+export default Copyright

package/common/drawer-menu.tsx

@@ -0,0 +1,51 @@
+'use client'
+import React, { type PropsWithChildren, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import Logo from './logo'
+import { Sheet, SheetContent, SheetTrigger } from '../primitives/sheet'
+
+const DrawerMenu: React.FC<PropsWithChildren & {
+  trigger: ReactNode
+  className?: string
+  showLogo?: boolean
+}> = ({
+  trigger,
+  children,
+  className='',
+  showLogo=true
+}) => {
+
+  const [open, setOpen] = React.useState(false)
+
+  const onAction = () => { setOpen(false) }
+
+    // https://stackoverflow.com/a/49052730/11645689
+  const updatedChildren = React.Children.map(
+    children,
+    (child) => (React.cloneElement(
+      child as any, { onAction }
+    ))
+  )
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen} >
+      <SheetTrigger>
+        {trigger}
+      </SheetTrigger>
+      <SheetContent 
+        side="right" 
+        className={className} 
+        closeButtonClass='text-inherit opacity-90' 
+        onClick={onAction}
+        closeElement={<LucideX className='h-6 w-6 text-inherit'/>}
+        centerElement={showLogo ? <Logo size='xs' className='' /> : null}
+      >
+        {updatedChildren}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export default DrawerMenu

package/common/footer.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import type { LinkDef, SiteDef } from '../types'
+import { Copyright } from '.'
+import { NavItems } from '../primitives'
+import { legal } from '../siteDef/footer/legal'
+
+import Logo from './logo'
+import { cn } from '../util'
+
+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 max-w-screen-2xl ' +
+        'md:flex md:flex-row md:justify-between ' 
+      }>
+        <div className='hidden lg:flex flex-col' key={0}>
+          <Logo size='md' />
+        </div>
+        {footer.map((defs: LinkDef[], 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 (
+            <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-heading text-[15px]/[1.3] font-medium text-foreground tracking-normal'
+                : 
+                'text-[15px]/[1.1] font-normal tracking-[0.2px] text-muted-1'
+              )}
+            /> 
+          )
+        })}
+      </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