@hanzo/ui 4.5.0 → 4.5.2

package/dist/blocks/components/screenful-block/content.jsx

@@ -0,0 +1,71 @@
+import React, {} from 'react';
+import { containsToken, cn } from '../../../util';
+import ContentComponent from '../content';
+const ContentColumn = ({ blocks, specifiers, agent, className = '', }) => {
+    const specified = (s) => (containsToken(specifiers, s));
+    let modifiers = '';
+    if (agent !== 'phone') {
+        if (specified('right')) {
+            modifiers += 'items-end ';
+        }
+        else if (specified('center')) {
+            modifiers += 'items-center ';
+        }
+        // default to left
+        else {
+            modifiers += 'items-start ';
+        }
+    }
+    // default to left
+    else {
+        modifiers += 'items-start ';
+    }
+    if (agent !== 'phone') {
+        if (specified('bottom')) {
+            modifiers += 'justify-end ';
+        }
+        else if (specified('vert-center')) {
+            modifiers += 'justify-center ';
+        }
+        // default to top 
+        else {
+            modifiers += 'justify-start ';
+        }
+        // right aligned text looks shitty on mobile 
+        if (specified('text-align-right')) {
+            modifiers += 'text-right ';
+        }
+        else {
+            modifiers += 'text-left ';
+        }
+    }
+    else {
+        if (specified('mobile-vert-center')) {
+            modifiers += 'justify-center ';
+        }
+        else {
+            modifiers += 'justify-start ';
+        }
+    }
+    if (agent === 'phone' && specified('mobile-center-headings')) {
+        modifiers += 'typography-headings:text-center ';
+    }
+    /* ContentComponent's parent div needs h-full class in order for vertical alignment with flexbox to work.
+    *  This affects specifiers: bottom, vert-center, mobile-vert-center
+    */
+    return (<div className={cn('flex flex-col justify-center h-full', modifiers, className)}>
+      <ContentComponent blocks={blocks} agent={agent}/>
+    </div>);
+};
+const Content = ({ block: b, agent, className = '', }) => {
+    // We need to set h-full when we have more than 1 column too, so the grid takes full height - Firefox and Safari fix.
+    const layoutClx = 'flex flex-col gap-2 sm:gap-4 h-full ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '');
+    const orderclx = (columnIndex) => {
+        const orderIndex = b.mobileOrder?.indexOf(columnIndex);
+        return (orderIndex && orderIndex >= 0) ? `order-${orderIndex} md:order-none` : ''; // one-based in flexbox slec
+    };
+    return b.contentColumns.length == 1 ? (<ContentColumn blocks={b.contentColumns[0]} specifiers={b.columnSpecifiers?.[0]} agent={agent} className={cn(className)}/>) : (<div className={cn(layoutClx, className)}>
+    {b.contentColumns.map((column, index) => (<ContentColumn blocks={column} specifiers={b.columnSpecifiers?.[index]} agent={agent} className={orderclx(index)} key={index}/>))}  
+    </div>);
+};
+export default Content;

package/dist/blocks/components/screenful-block/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Block } from '../../def';
+declare const ScreenfulComponent: React.FC<{
+    block: Block;
+    agent?: string;
+    initialInView?: boolean;
+    snapTile?: boolean;
+    clx?: string;
+    contentClx?: string;
+    bottom?: React.ReactNode;
+}>;
+export default ScreenfulComponent;

package/dist/blocks/components/screenful-block/index.jsx

@@ -0,0 +1,57 @@
+'use client';
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { containsToken, cn } from '../../../util';
+import { ApplyTypography } from '../../../primitives/index-common';
+import Poster from './poster-background';
+import Content from './content';
+const Video = dynamic(() => (import('./video-background')), { ssr: false, loading: () => (<></>) });
+const ScreenfulComponent = ({ block, agent, initialInView = false, snapTile = false, clx = '', contentClx = '', bottom }) => {
+    if (block.blockType !== 'screenful') {
+        return <>screenful block required</>;
+    }
+    const b = block;
+    const hasBannerVideo = () => (!!b.banner && (typeof b.banner === 'object'));
+    const tileHeight = (agent === 'desktop') ? 'h-full ' : 'h-[100svh] ';
+    const specified = (s) => (containsToken(b.specifiers, s));
+    const narrowGutters = specified('narrow-gutters'); // eg, for a table object that is large
+    const noGutters = specified('no-gutters');
+    const fullScreenWidth = specified('full-screen-width');
+    const vertCenter = specified('vert-center'); // at the main level, it seems only useful w one column
+    const oneColumn = b.contentColumns.length === 1;
+    // content wrapper clx:
+    // [
+    //    positioning, 
+    //    p&m, 
+    //    p&m-modifiers
+    // ]
+    const cwclx = [
+        'xl:mx-auto overflow-y-hidden h-full',
+        fullScreenWidth ? '' : 'max-w-screen-xl',
+        // desktop header: 80px / pt-20
+        // mobile header: 44px / pt-11  
+        narrowGutters ?
+            'px-6 lg:px-8 2xl:px-2 pb-4 lg:pb-6 xl:pb-8 ' + (snapTile ? 'pt-15 md:pt-26 lg:pt-28 ' : '') // otherwise assume there is a Main
+            :
+                noGutters ?
+                    'px-0 pb-0 ' + (snapTile ? 'pt-11 lg:pt-20 ' : '') // otherwise assume there is a Main
+                    :
+                        'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
+        (agent && agent !== 'desktop') ? 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8' : ''
+    ];
+    return (<section {...((b.anchorId) ? { id: b.anchorId } : {})} className={cn(snapTile ? 'snap-start snap-always h-[100vh]' : 'min-h-screen', bottom ? 'flex flex-col' : '', clx)}>
+      <ApplyTypography className={cn('w-full flex flex-row justify-center self-stretch', snapTile ? tileHeight : '', bottom ? 'grow' : '')}>
+        <Poster banner={b.banner}>
+        {hasBannerVideo() && (<Video block={b.banner} className='absolute top-0 left-0 bottom-0 right-0' initialInView={initialInView}/>)}
+        <div className={cn(...cwclx, snapTile ? 'absolute left-0 right-0 top-0 bottom-0 ' : 'flex min-h-screen w-full', contentClx, 
+        // TODO :aa py-0 breaks padding for header!  Investigate why I would have done this!
+        vertCenter ? 'self-center ' + (oneColumn ? '!py-0' : '') : '')}>
+          <Content block={b} agent={agent} className='w-full'/>
+          {b.footer}
+        </div>
+      </Poster>
+      </ApplyTypography>
+      {bottom}
+    </section>);
+};
+export default ScreenfulComponent;

package/dist/blocks/components/screenful-block/poster-background.d.ts

@@ -0,0 +1,7 @@
+import React, { type PropsWithChildren } from 'react';
+import type { VideoBlock } from '../../def';
+declare const Poster: React.FC<{
+    banner: VideoBlock | string | undefined;
+    className?: string;
+} & PropsWithChildren>;
+export default Poster;

package/dist/blocks/components/screenful-block/poster-background.jsx

@@ -0,0 +1,14 @@
+import React, {} from 'react';
+import { cn } from '../../../util';
+const Poster = ({ children, banner, className = '' }) => (banner ? (<div className={cn('relative', className)} style={{
+        height: '100%',
+        width: '100%',
+        backgroundImage: `url(${(typeof banner === 'string') ? banner : banner.poster})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+    }}>
+      {children}
+    </div>) : (<div className={cn('bg-transparent h-full w-full relative', className)}>
+      {children}  
+    </div>));
+export default Poster;

package/dist/blocks/components/screenful-block/video-background.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { VideoBlock } from '../../def';
+declare const VideoBG: React.FC<{
+    block: VideoBlock;
+    className?: string;
+    initialInView: boolean;
+}>;
+export default VideoBG;

package/dist/blocks/components/screenful-block/video-background.jsx

@@ -0,0 +1,20 @@
+'use client';
+import React from 'react';
+import { useInView } from 'react-intersection-observer';
+const VideoBG = ({ block, className = '', initialInView }) => {
+    const { ref, inView } = useInView({
+        threshold: 0.75,
+        initialInView,
+    });
+    return block ? (<div ref={ref} className={className}>
+    {inView && (<video autoPlay loop muted style={{
+                margin: 0,
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+            }}>
+      {block.sources?.map((src, index) => (<source key={index} src={src}/>))} 
+      </video>)}
+    </div>) : null;
+};
+export default VideoBG;

package/dist/blocks/components/space-block.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type BlockComponentProps from './block-component-props';
+declare const SpaceBlockComponent: React.FC<BlockComponentProps>;
+export default SpaceBlockComponent;

package/dist/blocks/components/space-block.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ldMerge, cn } from '../../util';
+import { SPACE_DEFAULTS } from '../def/space-block';
+import { ApplyTypography } from '../../primitives/index-common';
+const TAGS = [
+    'div',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+];
+const SpaceBlockComponent = ({ block, className = '' }) => {
+    if (block && block.blockType !== 'space') {
+        return <>space block required</>;
+    }
+    const b = block;
+    // This code path should handle a undefined or empty sizes field.
+    if (!b.level) {
+        if (typeof b.sizes == 'number') {
+            return <div className={cn(`invisible w-[1px] h-${b.sizes}`, className)}/>;
+        }
+        const _sizes = {};
+        ldMerge(_sizes, SPACE_DEFAULTS, b.sizes);
+        let clx = '';
+        for (const [key, value] of Object.entries(_sizes)) {
+            // ts brain fart!
+            clx += `${key}:h-${value} `;
+        }
+        if (b.test) {
+            console.log(clx);
+        }
+        return <div className={cn('invisible w-[1px] ' + clx, className)}/>;
+    }
+    const Tag = TAGS[b.level];
+    const heightClx = (b.level === 0) ? 'h-4' : '';
+    return (<ApplyTypography className={className}>
+      <Tag className={'invisible m-0 ' + heightClx}>&nbsp;</Tag> 
+    </ApplyTypography>);
+};
+export default SpaceBlockComponent;

package/dist/blocks/components/video-block.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Dimensions, TShirtSize } from '../../types';
+import type BlockComponentProps from './block-component-props';
+declare const VideoBlockComponent: React.FC<BlockComponentProps & {
+    usePoster?: boolean;
+    size?: TShirtSize;
+    constrainTo?: Dimensions;
+}>;
+export default VideoBlockComponent;

package/dist/blocks/components/video-block.jsx

@@ -0,0 +1,83 @@
+'use client';
+import React, { useEffect, useLayoutEffect, useState } from 'react';
+import Image from 'next/image';
+import { constrain, asNum, cn } from '../../util';
+import { VideoPlayer } from '../../primitives/index-common';
+const VideoBlockComponent = ({ block, className = '', agent, usePoster = false, size = 'md', constrainTo }) => {
+    const [_dim, setDim] = useState(undefined);
+    const onResize = () => {
+        setDim({
+            w: window.innerWidth,
+            h: window.innerHeight
+        });
+    };
+    const windowDefined = typeof window !== 'undefined';
+    useEffect(() => {
+        if (window && agent === 'desktop') {
+            window.addEventListener('resize', onResize);
+            return () => window.removeEventListener('resize', onResize);
+        }
+    }, [windowDefined]);
+    useLayoutEffect(() => {
+        onResize();
+    }, []);
+    if (block.blockType !== 'video') {
+        return <>video block required</>;
+    }
+    const b = block;
+    const ar = b.dim.md.w / b.dim.md.h;
+    if (agent === 'phone') {
+        if (b.sizing?.mobile?.vw) {
+            // serverside, or at least while the video is loading,
+            // generate the css for the correctly sized poster image
+            if (!_dim) {
+                const width = `${b.sizing.mobile.vw}vw`;
+                return <div className='dummy-div' style={{
+                        maxWidth: '100%',
+                        maxHeight: '100%',
+                        width,
+                        height: `calc(${width}/${ar})`,
+                        backgroundImage: `url(${b.poster})`,
+                        backgroundSize: 'contain',
+                        backgroundRepeat: 'no-repeat',
+                    }}/>;
+            }
+            else {
+                const width = ((b.sizing.mobile.vw / 100) * _dim.w);
+                const dim = {
+                    h: width / ar,
+                    w: width
+                };
+                return ((<VideoPlayer className={cn('mx-auto', className)} sources={b.sources} width={dim.w} height={dim.h} {...b.videoProps}/>));
+            }
+        }
+    }
+    else if (b.sizing?.vh) {
+        // serverside, generate the css for the correctly sized poster image
+        if (!_dim) {
+            const height = `${b.sizing.vh}vh`;
+            return <div className='dummy-div' style={{
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    height: height,
+                    width: `calc(${height}*${ar})`,
+                    backgroundImage: `url(${b.poster})`,
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                }}/>;
+        }
+        else {
+            const height = ((b.sizing.vh / 100) * _dim.h);
+            const dim = {
+                h: height,
+                w: height * ar
+            };
+            return ((<VideoPlayer className={cn('mx-auto', className)} sources={b.sources} width={dim.w} height={dim.h} {...b.videoProps}/>));
+        }
+    }
+    const videoDims = b.dim;
+    const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md);
+    const conDim = (constrainTo ? constrain(dim, constrainTo) : dim);
+    return usePoster ? (<Image src={b.poster} alt='image' width={conDim.w} height={conDim.h} className={className}/>) : (<VideoPlayer className={cn('mx-auto', className)} sources={b.sources} width={conDim.w} height={conDim.h} {...b.videoProps}/>);
+};
+export default VideoBlockComponent;

package/dist/blocks/def/accordian-block.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type Block from './block';
+interface AccordianBlock extends Block {
+    blockType: 'accordian';
+    items: {
+        trigger: string;
+        content: React.ReactNode;
+    }[];
+}
+export { type AccordianBlock as default };

package/dist/blocks/def/accordian-block.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export {};

package/dist/blocks/def/block.d.ts

@@ -0,0 +1,4 @@
+interface Block {
+    blockType: string;
+}
+export { type Block as default };

package/dist/blocks/def/block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/bullet-cards-block.d.ts

@@ -0,0 +1,17 @@
+import type Block from './block';
+import type { BulletItem, GridDef } from '../../types';
+interface BulletCardsBlock extends Block {
+    blockType: 'bullet-cards';
+    /**
+     * no-card-border
+     * mobile-small-text
+     * borders-muted-1 / borders-muted-3
+     * default: 2
+     */
+    specifiers?: string;
+    grid: GridDef;
+    cards: BulletItem[];
+    /** in px */
+    iconSize?: number;
+}
+export { type BulletCardsBlock as default };

package/dist/blocks/def/bullet-cards-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/card-block.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type CTABlock from './cta-block';
+import type Block from './block';
+import type ImageBlock from './image-block';
+import type VideoBlock from './video-block';
+interface CardBlock extends Block {
+    blockType: 'card';
+    specifiers?: string;
+    title?: string;
+    byline?: string;
+    icon?: React.ReactNode;
+    iconAfter?: boolean;
+    media?: ImageBlock | VideoBlock;
+    content?: React.ReactNode;
+    cta?: CTABlock;
+}
+export { type CardBlock as default };

package/dist/blocks/def/card-block.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export {};

package/dist/blocks/def/carte-blanche-block.d.ts

@@ -0,0 +1,12 @@
+import type Block from './block';
+import type CTABlock from './cta-block';
+import type EnhHeadingBlock from './enh-heading-block';
+interface CarteBlancheBlock extends Block {
+    blockType: 'carte-blanche';
+    specifiers?: string;
+    topContent?: Block[];
+    heading?: EnhHeadingBlock;
+    content?: Block[];
+    cta?: CTABlock;
+}
+export { type CarteBlancheBlock as default };

package/dist/blocks/def/carte-blanche-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/cta-block.d.ts

@@ -0,0 +1,8 @@
+import type { LinkDef, ButtonDef } from '../../types';
+import type Block from './block';
+interface CTABlock extends Block {
+    blockType: 'cta';
+    specifiers?: string;
+    elements: (LinkDef | ButtonDef)[];
+}
+export { type CTABlock as default };

package/dist/blocks/def/cta-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/element-block.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type Block from './block';
+interface ElementBlock extends Block {
+    blockType: 'element';
+    element: React.ReactNode | JSX.Element;
+}
+export { type ElementBlock as default };

package/dist/blocks/def/element-block.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export {};

package/dist/blocks/def/enh-heading-block.d.ts

@@ -0,0 +1,22 @@
+import type Block from './block';
+interface EnhHeadingBlock extends Block {
+    blockType: 'enh-heading';
+    specifiers?: string;
+    icon?: React.ReactNode;
+    iconSize?: number;
+    preheading?: {
+        text: string;
+        level?: number;
+        mb?: number;
+    };
+    heading: {
+        text: string;
+        level?: number;
+        mb?: number;
+    };
+    byline?: {
+        text: string;
+        level?: number;
+    };
+}
+export { type EnhHeadingBlock as default };

package/dist/blocks/def/enh-heading-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/grid-block.d.ts

@@ -0,0 +1,12 @@
+import type Block from "./block";
+import type GridDef from "../../types/grid-def";
+interface GridBlock {
+    blockType: 'grid';
+    specifiers?: string;
+    grid: GridDef;
+    /**
+     * Ignored if children are supplied to the GridBlockComp
+     */
+    cells?: Block[];
+}
+export { type GridBlock as default };

package/dist/blocks/def/grid-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/group-block.d.ts

@@ -0,0 +1,7 @@
+import type Block from './block';
+interface GroupBlock extends Block {
+    blockType: 'group';
+    specifiers?: string;
+    elements: Block[];
+}
+export { type GroupBlock as default };

package/dist/blocks/def/group-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/heading-block.d.ts

@@ -0,0 +1,11 @@
+import type Block from './block';
+interface HeadingBlock extends Block {
+    blockType: 'heading';
+    heading: string;
+    byline?: string;
+    level?: number;
+    bylineLevel?: number;
+    spaceBetween?: number;
+    spaceAfter?: number;
+}
+export { type HeadingBlock as default };

package/dist/blocks/def/heading-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/image-block.d.ts

@@ -0,0 +1,26 @@
+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?: any;
+    };
+}
+export { type ImageBlock as default, };

package/dist/blocks/def/image-block.js

@@ -0,0 +1 @@
+export {};

package/dist/blocks/def/index.d.ts

@@ -0,0 +1,17 @@
+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/dist/blocks/def/index.js

@@ -0,0 +1,2 @@
+import { SPACE_DEFAULTS } from './space-block';
+export { SPACE_DEFAULTS };

package/dist/blocks/def/screenful-block.d.ts

@@ -0,0 +1,41 @@
+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;
+    /** optional id for linking to this slide / screenful */
+    anchorId?: string;
+}
+export { type ScreenfulBlock as default };

package/dist/blocks/def/screenful-block.js

@@ -0,0 +1 @@
+export {};