@hanzo/ui 4.5.0 → 4.5.2

package/bin/update-registry.js

@@ -0,0 +1,196 @@
+#!/usr/bin/env node
+
+/**
+ * This script updates the registry.json file based on components
+ * found in the registry directory. It's similar to the approach used by shadcn/ui.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+// Configuration
+const REGISTRY_DIR = path.resolve(__dirname, '../registry');
+const PUBLIC_DIR = path.resolve(__dirname, '../public');
+const OUTPUT_FILE = path.resolve(__dirname, '../registry.json');
+const REGISTRY_STYLES = ['default', 'new-york']; // Add other styles as needed
+
+// Schema for registry.json
+const registrySchema = {
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "hanzo",
+  "homepage": "https://ui.hanzo.ai",
+  "items": []
+};
+
+/**
+ * Main function to update the registry
+ */
+async function updateRegistry() {
+  try {
+    console.log('Updating registry.json...');
+    
+    // Find all registry components
+    const items = [];
+    
+    // Process each style directory
+    for (const style of REGISTRY_STYLES) {
+      const styleDir = path.join(REGISTRY_DIR, style);
+      
+      // Skip if style directory doesn't exist
+      if (!fs.existsSync(styleDir)) {
+        console.log(`Style directory not found: ${style}`);
+        continue;
+      }
+      
+      // Process UI components
+      const uiDir = path.join(styleDir, 'ui');
+      if (fs.existsSync(uiDir)) {
+        const uiComponents = glob.sync(`${uiDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of uiComponents) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          const fileName = path.basename(filePath);
+          
+          // Skip index files and non-component files
+          if (fileName === 'index.ts' || fileName === 'index.tsx') continue;
+          
+          // Component name is usually the directory name
+          const name = dirName;
+          
+          // Check if component already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:component')) {
+            const componentMeta = {
+              name,
+              type: 'registry:component',
+              description: `A ${name} component for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:component'
+                }
+              ],
+              registryDependencies: []
+            };
+            
+            // Try to parse dependencies from the file content
+            try {
+              const content = fs.readFileSync(filePath, 'utf8');
+              
+              // Find import statements for other components
+              const dependencies = [];
+              const importRegex = /import.*from ['"]@\/components\/ui\/([^'"]+)['"]/g;
+              let match;
+              
+              while ((match = importRegex.exec(content)) !== null) {
+                const dependency = match[1];
+                if (!dependencies.includes(dependency)) {
+                  dependencies.push(dependency);
+                }
+              }
+              
+              if (dependencies.length > 0) {
+                componentMeta.registryDependencies = dependencies;
+              }
+            } catch (error) {
+              console.warn(`Error parsing dependencies for ${name}:`, error.message);
+            }
+            
+            items.push(componentMeta);
+          }
+        }
+      }
+      
+      // Process other component types (blocks, etc.)
+      const blockDir = path.join(styleDir, 'block');
+      if (fs.existsSync(blockDir)) {
+        const blocks = glob.sync(`${blockDir}/**/!(*.test|*.spec).{ts,tsx,js,jsx}`);
+        
+        for (const filePath of blocks) {
+          const relativePath = path.relative(REGISTRY_DIR, filePath);
+          const dirName = path.basename(path.dirname(filePath));
+          
+          // Skip helper files
+          if (dirName === 'utils' || dirName === 'helpers') continue;
+          
+          // Block name is usually the directory name
+          const name = dirName;
+          
+          // Check if block already exists in the registry
+          if (!items.find(item => item.name === name && item.type === 'registry:block')) {
+            items.push({
+              name,
+              type: 'registry:block',
+              description: `A ${name} block for your UI.`,
+              files: [
+                {
+                  path: relativePath,
+                  type: 'registry:block'
+                }
+              ]
+            });
+          }
+        }
+      }
+    }
+    
+    // Add style definition
+    for (const style of REGISTRY_STYLES) {
+      items.push({
+        name: style,
+        type: 'registry:style',
+        description: `The ${style} style for Hanzo UI components.`,
+        files: []
+      });
+    }
+    
+    // Update registry.json
+    registrySchema.items = items;
+    
+    // Create output directory if it doesn't exist
+    const outputDir = path.dirname(OUTPUT_FILE);
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir, { recursive: true });
+    }
+    
+    // Write registry.json
+    fs.writeFileSync(OUTPUT_FILE, JSON.stringify(registrySchema, null, 2), 'utf8');
+    console.log(`Registry updated with ${items.length} items.`);
+    
+    // Create public/r directory if it doesn't exist
+    const publicRDir = path.join(PUBLIC_DIR, 'r');
+    if (!fs.existsSync(publicRDir)) {
+      fs.mkdirSync(publicRDir, { recursive: true });
+    }
+    
+    // Generate individual component JSON files
+    console.log('Generating individual component JSON files...');
+    for (const item of items) {
+      const componentFile = path.join(publicRDir, `${item.name}.json`);
+      
+      // Add content to files if they exist
+      if (item.files && item.files.length > 0) {
+        for (const file of item.files) {
+          const filePath = path.join(REGISTRY_DIR, file.path);
+          if (fs.existsSync(filePath)) {
+            file.content = fs.readFileSync(filePath, 'utf8');
+          }
+        }
+      }
+      
+      // Write component JSON file
+      fs.writeFileSync(componentFile, JSON.stringify(item, null, 2), 'utf8');
+    }
+    
+    console.log(`Generated ${items.length} component JSON files.`);
+    console.log('Registry update complete!');
+    
+  } catch (error) {
+    console.error('Error updating registry:', error);
+    process.exit(1);
+  }
+}
+
+// Run the update
+updateRegistry();

package/blocks/components/screenful-block/index.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import dynamic from 'next/dynamic'
 

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ApplyTypography } from '../../primitives/index-common';
+import { cn } from '../../util';
+const AccordianBlockComponent = ({ block, className = '' }) => {
+    if (block.blockType !== 'accordian') {
+        return <>accordian block required</>;
+    }
+    const accordian = block;
+    return (<Accordion type="single" collapsible className={cn('w-full border rounded-xl overflow-hidden', className)}>
+      {accordian.items.map((item, index) => (<AccordionItem className='border-b last:border-0 overflow-hidden' value={`value-${index}`} key={index}>
+        <AccordionTrigger className='px-3 md:px-4 lg:px-6 hover:no-underline hover:bg-level-3'>
+          <ApplyTypography>
+            {/* styles specific to accordion.  From old site */}
+            <h6 className='leading-[1.2] text-[1.05rem] font-semibold '>{item.trigger}</h6>
+          </ApplyTypography>
+        </AccordionTrigger>
+        <AccordionContent className='p-4 border-t bg-level-1'>
+        <ApplyTypography className='flex flex-col justify-start items-start '>
+          {(typeof item.content === 'string') ? (<p>{item.content}</p>) : item.content} 
+        </ApplyTypography>
+        </AccordionContent>
+      </AccordionItem>))}
+    </Accordion>);
+};
+export default AccordianBlockComponent;

package/dist/blocks/components/block-component-props.d.ts

@@ -0,0 +1,7 @@
+import type { Block } from "../def";
+interface BlockComponentProps {
+    block: Block;
+    className?: string;
+    agent?: string;
+}
+export { type BlockComponentProps as default };

package/dist/blocks/components/block-component-props.js

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

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

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

package/dist/blocks/components/bullet-cards-block.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { containsToken, cn } from '../../util';
+import InlineIcon from '../../primitives/next/inline-icon';
+import GridBlockComponent from './grid-block';
+const BulletCardsBlockComponent = ({ block, className = '', agent }) => {
+    if (block.blockType !== 'bullet-cards') {
+        return <>bullet cards block required</>;
+    }
+    const b = block;
+    const specified = (s) => (containsToken(b.specifiers, s));
+    const noBorder = specified('no-card-border') ? 'border-0' : 'md:border';
+    const mobileTextXs = specified('mobile-small-text') ? 'text-xs' : 'text-sm';
+    const borderclx = specified('border-muted-3') ?
+        'md:border-muted-3'
+        :
+            (specified('border-muted-1') ? 'md:border-muted-1' : 'md:border-muted-2');
+    return (<GridBlockComponent block={{ blockType: 'grid', grid: b.grid }} className={className} agent={agent}>
+    {b.cards.map((card, index) => (<div key={index} className={cn('px-0 sm:px-4 py-1 md:py-4 rounded-lg ' +
+                'flex flex-row justify-start items-center not-typography text-foreground', noBorder, borderclx)}>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 md:mr-4 '/>
+        <p className={cn('m-0 sm:text-base', mobileTextXs)}>{card.text}</p>
+      </div>))}
+    </GridBlockComponent>);
+};
+export default BulletCardsBlockComponent;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type BlockComponentProps from '../block-component-props';
+declare const CardBlockComponent: React.FC<BlockComponentProps & {
+    contentClassName?: string;
+}>;
+export default CardBlockComponent;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { ApplyTypography, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../../primitives/index-common';
+import ImageBlockComponent from '../image-block';
+import VideoBlockComponent from '../video-block';
+import CTABlockComponent from '../cta-block';
+import { cn } from '../../../util';
+import { getTypographySize } from './util';
+import LinkOutButton from './link-out-button';
+const CardBlockComponent = ({ block, className = '', contentClassName = '' }) => {
+    if (block.blockType !== 'card') {
+        return <>card block required</>;
+    }
+    const card = block;
+    const has = (s) => (card.specifiers?.includes(s));
+    const ghost = has('ghost'); // no outer padding, no borders, larger title, all left-aligned bg is same (default)
+    const contentclx = (has('content-left') ? 'items-start ' : ' items-center ') + (has('content-top') ? '!justify-start' : '') + contentClassName;
+    const disabledBorder = (has('appear-disabled') ? ' border-muted-4' : ' border-muted-3');
+    const outerBorder = ((has('no-outer-border') || ghost) ? ' border-0' : '');
+    const innerBorder = (ghost ? ' border-0' : '');
+    const paddingclx = ghost ? ' px-0 py-0' : ' px-6 py-3';
+    const mainGap = ghost ? ' gap-2' : '';
+    const disabledText = (has('appear-disabled') ? ' text-muted-2' : '');
+    const disabledTypoText = (has('appear-disabled') ? ' typography-p:text-muted-2' : '');
+    const bgclx = (has('bg-card') ? ' bg-level-1' : '');
+    const titleclx = (has('heading-style-title') ? ' font-heading text-base leading-tight' : '') +
+        (ghost ? ' text-left md:text-xl' : '');
+    const typoSize = (card.specifiers) ? getTypographySize(card.specifiers) : 'responsive';
+    const typoclx = (typoSize === 'sm') ? 'typography-sm typography-p:text-sm ' : (typoSize === 'lg') ? 'typography-lg ' : '';
+    const contentBefore = has('content-before');
+    const iconInline = has('icon-inline');
+    const contentOnHover = has('reveal-content-on-hover');
+    //const smallIconDim = (contentOnHover && card.specifiers) ? getSmallIconDim(card.specifiers) : undefined
+    const Header = ({ inContent = false, className = '' }) => ((card.title || card.byline || card.icon) ? (<CardHeader className={'not-typography' + ' text-accent' + disabledText + paddingclx + innerBorder + className}>
+      <div className={(iconInline || inContent) ? 'flex flex-row justify-start items-end my-3' : ''}>        
+      {(card.icon && !card.iconAfter) && (<div className={iconInline ? 'mr-1' : 'mb-2'}>{card.icon}</div>)}
+      {card.title && (<CardTitle className={'text-center text-lg font-medium' + titleclx + (iconInline ? ' md:text-xl/none' : '')}>
+          {card.title}
+        </CardTitle>)}
+      {(card.icon && card.iconAfter) && (<div className={iconInline ? 'ml-1' : 'my-1'}>{card.icon}</div>)}
+      </div>
+      {card.byline && (<CardDescription>{card.byline}</CardDescription>)}
+      </CardHeader>) : null);
+    const MediaAndContent = ({ className = '' }) => (has('media-left') ? (
+    // media left layout
+    <CardContent className={'flex flex-row justify-start items-stretch p-0 grow ' + disabledBorder + bgclx + contentclx + className}>
+    {card.media && (<div className={'box-content grow-0 not-typography' + paddingclx} style={{
+                // If this layout has been specified, assume media is video, and that the 'sm' dim exists.
+                width: card.media.dim.sm.w
+            }}>
+        <VideoBlockComponent block={card.media} usePoster={has('video-use-poster')} size='sm' className={has('appear-disabled') ? 'opacity-[0.6]' : ''}/>
+      </div>)}
+    {card.content && (<ApplyTypography className={'grow border-l flex flex-col justify-center ' + disabledTypoText + paddingclx + disabledBorder + contentclx} size={typoSize}>
+        {(typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content} 
+      </ApplyTypography>)}
+    </CardContent>) : ( // default layout
+    <CardContent className={'grow typography flex flex-col justify-center ' +
+            typoclx + disabledTypoText + bgclx + paddingclx + contentclx + (has('full-width') ? ' p-0 ' : ' ') +
+            className}>
+      {contentOnHover && (<Header inContent/>)}
+      {card.content && contentBefore && ((typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content)}
+      {card.media && (card.media.blockType === 'image' ? (<ImageBlockComponent block={card.media}/>) : (<VideoBlockComponent block={card.media}/>))}
+      {card.content && !contentBefore && ((typeof card.content === 'string') ? (<p>{card.content}</p>) : card.content)}
+    </CardContent>));
+    const Footer = () => (!card.cta ? null : (has('links-w-arrow') ? (
+    // links w arrow
+    <CardFooter className={'typography typography-a:text-muted-2 typography-a:hover:text-muted-1 typography-a:text-xs typography-a:no-underline typography-a:hover:underline ' +
+            'flex flex-col justify-start items-stretch ' + paddingclx}>
+      <CTABlockComponent block={card.cta} renderLink={(def, key) => (<LinkOutButton def={def} key={key}/>)}/>
+    </CardFooter>) : ( // default 
+    <CardFooter className={'grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center ' + paddingclx}>
+      <CTABlockComponent block={card.cta}/>
+    </CardFooter>)));
+    return (<Card className={cn('flex flex-col self-stretch ' +
+            (contentOnHover ? 'group relative' : '') +
+            disabledBorder +
+            outerBorder +
+            bgclx +
+            mainGap, className)}>
+      <Header className={(contentOnHover ? ' absolute top-[0px] left-[0px] w-full hidden ' : '')}/>
+      <MediaAndContent className={(contentOnHover ?
+            ' bg-gradient-to-t from-secondary to-65%' +
+                ' items-start justify-start rounded-lg p-4' +
+                ' transition-opacity duration-500 ease-out opacity-100  ' : '')}/>
+      <Footer />
+    </Card>);
+};
+export default CardBlockComponent;

package/dist/blocks/components/card-block/link-out-button.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { LinkDef } from '../../../types';
+declare const ArrowLinkElement: React.FC<{
+    def: LinkDef;
+}>;
+export default ArrowLinkElement;

package/dist/blocks/components/card-block/link-out-button.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LinkElement, Icons } from '../../../primitives/index-next';
+const ArrowLinkElement = ({ def }) => (<LinkElement def={def} className='justify-between' variant='link' icon={<Icons.linkOut className='w-[18px] h-[18px]'/>} iconAfter/>);
+export default ArrowLinkElement;

package/dist/blocks/components/card-block/util.d.ts

@@ -0,0 +1,4 @@
+import type { Dimensions } from '../../../types';
+import type { TypographySize } from '../../../primitives/index-common';
+export declare const getTypographySize: (s: string) => TypographySize;
+export declare const getSmallIconDim: (s: string) => Dimensions | undefined;

package/dist/blocks/components/card-block/util.js

@@ -0,0 +1,6 @@
+import { getSpecifierData, getPrimaryStartingWith, getDim, } from '../../../util/specifier';
+export const getTypographySize = (s) => getSpecifierData(s, (s) => (getPrimaryStartingWith(s, 'typography')), (s) => {
+    const subTokenArray = s.split('-');
+    return subTokenArray[subTokenArray.length - 1];
+}, 'responsive');
+export const getSmallIconDim = (s) => (getSpecifierData(s, (s) => (getPrimaryStartingWith(s, 'small-icon')), getDim));

package/dist/blocks/components/carte-blanche-block/index.d.ts

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

package/dist/blocks/components/carte-blanche-block/index.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, } from '../../../primitives/index-common';
+import { cn, containsToken } from '../../../util';
+import { getSpecifierData, getPrimaryStartingWith, getDim, } from '../../../util/specifier';
+import CTABlockComponent from '../cta-block';
+import Content from '../content';
+import { EnhHeadingBlockComponent } from '..';
+import VariantContentLeft from './variant-content-left';
+const _getClx = (specifier, section) => {
+    let result = '';
+    if (specifier === 'big-padding') {
+        switch (section) {
+            // defaults: p-4 lg:p-6 xl:p-8 
+            case 'header':
+                {
+                    result = 'md:p-8 lg:p-12 xl:p-16';
+                }
+                break;
+        }
+    }
+    if (specifier === 'big-padding-content') {
+        switch (section) {
+            case 'content':
+                {
+                    result = 'md:p-8 lg:p-12 xl:p-16';
+                }
+                break;
+        }
+    }
+    else if (specifier === 'no-inner-borders') {
+        switch (section) {
+            case 'header':
+                {
+                    result = 'border-none';
+                }
+                break;
+            case 'footer':
+                {
+                    result = 'border-t-0';
+                }
+                break;
+        }
+    }
+    return result;
+};
+const CarteBlancheBlockComponent = ({ block, className = '', agent, }) => {
+    if (block.blockType !== 'carte-blanche') {
+        return <>carte blanche block required</>;
+    }
+    const b = block;
+    const specified = (s) => (containsToken(b.specifiers, s));
+    const getClx = (specifier, section) => ((specified(specifier)) ? _getClx(specifier, section) : '');
+    //const bigPadding = specified('big-padding')
+    const headingclx = [
+        getClx('big-padding', 'header'),
+        getClx('no-inner-borders', 'header'),
+    ].join(' ');
+    const contentclx = [
+        getClx('big-padding-content', 'content'),
+    ].join(' ');
+    const footerclx = [
+        getClx('no-inner-borders', 'footer'),
+    ].join(' ');
+    const noOuterBorders = specified('no-outer-borders');
+    const contentLeft = specified('variant-content-left');
+    const mobileContentLeft = specified('variant-mobile-content-left');
+    return (<Card className={cn('flex flex-col', className, noOuterBorders ? 'border-none' : '')}>
+      {contentLeft || (mobileContentLeft && agent === 'phone') ? (<VariantContentLeft block={b} agent={agent} className={className} headingclx={headingclx} contentclx={contentclx} footerclx={footerclx}/>) : (<>
+        {(b.heading || b.topContent) && (<CardHeader className={cn('typography-img:m-0', headingclx)}>
+            {b.topContent && (<Content blocks={b.topContent} agent={agent} className=''/>)}
+            {b.heading && (<EnhHeadingBlockComponent block={b.heading} className='text-accent' agent={agent}/>)}
+          </CardHeader>)}
+        {b.content && (<CardContent className={cn('typography flex flex-col justify-center', contentclx, className)}>
+            <Content blocks={b.content} agent={agent}/>
+          </CardContent>)}
+        {b.cta && (<CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center', footerclx)}>
+            <CTABlockComponent block={b.cta} agent={agent}/>
+          </CardFooter>)}
+      </>)}
+    </Card>);
+};
+export default CarteBlancheBlockComponent;

package/dist/blocks/components/carte-blanche-block/variant-content-left.d.ts

@@ -0,0 +1,10 @@
+import { type CarteBlancheBlock } from '../..';
+declare const VariantContentLeft: React.FC<{
+    block: CarteBlancheBlock;
+    agent?: string;
+    className?: string;
+    headingclx?: string;
+    contentclx?: string;
+    footerclx?: string;
+}>;
+export default VariantContentLeft;

package/dist/blocks/components/carte-blanche-block/variant-content-left.jsx

@@ -0,0 +1,23 @@
+import { EnhHeadingBlockComponent, CTABlockComponent } from '../..';
+import { CardContent, CardFooter, CardHeader, } from '../../../primitives/index-common';
+import { cn } from '../../../util';
+import Content from '../content';
+const VariantContentLeft = ({ block, agent, className, headingclx, contentclx, footerclx, }) => {
+    return (<>
+    <div className='flex gap-2'>
+      {block.topContent && <Content blocks={block.topContent} agent={agent} className='self-center ml-6 mt-6'/>}
+      <div className='flex flex-col'>
+        {block.heading && (<CardHeader className={cn('typography-img:m-0', headingclx)}>
+            <EnhHeadingBlockComponent block={block.heading} className='text-accent' agent={agent}/>
+          </CardHeader>)}
+        {block.content && (<CardContent className={cn('typography flex flex-col justify-start', contentclx, className)}>
+            <Content blocks={block.content} agent={agent}/>
+          </CardContent>)}
+      </div>
+    </div>
+    {block.cta && (<CardFooter className={cn('grid grid-cols-1 gap-2 md:flex md:flex-row md:justify-center mx-auto', footerclx)}>
+        <CTABlockComponent block={block.cta} agent={agent}/>
+      </CardFooter>)}
+  </>);
+};
+export default VariantContentLeft;

package/dist/blocks/components/content.d.ts

@@ -0,0 +1,10 @@
+import React, { type ComponentType } from 'react';
+import type * as B from '../def';
+import type BlockComponentProps from './block-component-props';
+declare const registerBlockType: (key: string, type: ComponentType<BlockComponentProps>) => void;
+declare const ContentComponent: React.FC<{
+    blocks: B.Block | B.Block[] | undefined;
+    className?: string;
+    agent?: string;
+}>;
+export { ContentComponent as default, registerBlockType };

package/dist/blocks/components/content.jsx

@@ -0,0 +1,47 @@
+import React, {} from 'react';
+import AccordianBlockComponent from './accordian-block';
+import BulletCardsBlockComponent from './bullet-cards-block';
+import CTABlockComponent from './cta-block';
+import CardBlockComponent from './card-block';
+import CarteBlancheBlockComponent from './carte-blanche-block';
+import EnhHeadingBlockComponent from './enh-heading-block';
+import HeadingBlockComponent from './heading-block';
+import GroupBlockComponent from './group-block';
+import GridBlockComponent from './grid-block';
+import ImageBlockComponent from './image-block';
+import SpaceBlockComponent from './space-block';
+import VideoBlockComponent from './video-block';
+const map = new Map();
+map.set('accordian', AccordianBlockComponent);
+map.set('bullet-cards', BulletCardsBlockComponent);
+map.set('card', CardBlockComponent);
+map.set('carte-blanche', CarteBlancheBlockComponent);
+map.set('cta', CTABlockComponent);
+map.set('heading', HeadingBlockComponent);
+map.set('enh-heading', EnhHeadingBlockComponent);
+map.set('space', SpaceBlockComponent);
+map.set('image', ImageBlockComponent);
+map.set('video', VideoBlockComponent);
+map.set('group', GroupBlockComponent);
+map.set('grid', GridBlockComponent);
+const registerBlockType = (key, type) => {
+    map.set(key, type);
+};
+const renderBlock = (block, className, agent, keyStr) => {
+    if (block.blockType === 'element') {
+        return block.element;
+    }
+    const CompType = map.get(block.blockType);
+    if (!CompType)
+        return null;
+    return <CompType block={block} className={className} agent={agent} key={keyStr ?? ''}/>;
+};
+const ContentComponent = ({ blocks, className = '', agent }) => {
+    if (!blocks)
+        return null;
+    if (Array.isArray(blocks)) {
+        return (blocks.map((block, index) => (renderBlock(block, className, agent, `content-block-${block.blockType}-${index}`))));
+    }
+    return renderBlock(blocks, className, agent);
+};
+export { ContentComponent as default, registerBlockType };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { LinkDef, ButtonDef } from '../../types';
+import { buttonVariants } from '../../primitives/index-next';
+import { type VariantProps } from '../../util';
+import type BlockComponentProps from './block-component-props';
+declare const CtaBlockComponent: React.FC<BlockComponentProps & {
+    itemClasses?: string;
+    itemSize?: VariantProps<typeof buttonVariants>['size'];
+    renderLink?: (def: LinkDef, key: any) => JSX.Element;
+    renderButton?: (def: ButtonDef, key: any) => JSX.Element;
+}>;
+export default CtaBlockComponent;