@hanzo/ui 0.5.11 → 0.5.13

package/blocks/components/bullet-cards-block.tsx

@@ -19,20 +19,22 @@ const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
   const b = block as BulletCardsBlock
   const specified = (s: string) => (containsToken(b.specifiers, s))
   
+  const noBorder = specified('no-card-border') ? 'border-0' : 'md:border'
+
   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} as Block} className={className} agent={agent}>
     {b.cards.map((card, index) => (
-      <div key={index} className={cn('px-0 sm:px-4 py-1 md:py-4 md:border rounded ' + 
+      <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 w-6 md:mr-4 md:w-7 '/>
+        <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 md:mr-4 '/>
         <p className='m-0 text-sm sm:text-base'>{card.text}</p>
       </div>
     ))}

package/blocks/components/card-block.tsx

@@ -83,7 +83,7 @@ const CardBlockComponent: React.FC<
 
   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 ') + contentClassName
+  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' : '')

package/blocks/components/carte-blanche-block/index.tsx

@@ -34,6 +34,13 @@ const _getClx = (specifier: string, section: CardSection): string => {
       } 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': {
@@ -71,8 +78,14 @@ const CarteBlancheBlockComponent: React.FC<
     getClx('no-inner-borders', 'header'),
   ].join(' ')
 
+  const contentclx = [
+    getClx('big-padding-content', 'content'),
+  ].join(' ')
+
+  const noOuterBorders = specified('no-outer-borders')
+
   return (
-    <Card className={cn('flex flex-col ', className)} >
+    <Card className={cn('flex flex-col ', className, noOuterBorders ? 'border-none' : '')} >
     {b.heading && (
       <CardHeader className={cn('typography-img:m-0', headingclx)} >
       {b.topContent && (
@@ -82,7 +95,7 @@ const CarteBlancheBlockComponent: React.FC<
       </CardHeader>
     )}
     {b.content && (
-      <CardContent className={cn('typography flex flex-col justify-center', className)}>
+      <CardContent className={cn('typography flex flex-col justify-center', contentclx, className)}>
         <Content blocks={b.content} agent={agent}/>
       </CardContent>
     )}

package/blocks/components/enh-heading-block.tsx

@@ -124,6 +124,7 @@ const EnhHeadingBlockComponent: React.FC<
   const specified = (s: string) => (containsToken(b.specifiers + extraSpecifiers, s))
   const preheadingHeadingFont = specified('preheading-heading-font')
   const phFontClx = preheadingHeadingFont ? 'font-heading' : ''
+  const alignMiddleClx = specified('align-middle') ? 'my-auto' : ''
 
   const positionclx = getPositionClx(specified, agent)
 
@@ -167,7 +168,7 @@ const EnhHeadingBlockComponent: React.FC<
         if (b.icon && !iconRendered) {
           iconRendered = true
           return (
-            <div className={cn('flex flex-row items-center', clx)} key={`div-${index}`}>
+            <div className={cn('flex flex-row items-center gap-2 sm:gap-4', clx)} key={`div-${index}`}>
               <InlineIcon icon={b.icon} size={b.iconSize ?? 32} agent={agent}/>
               <Element asTag={tag} text={text} />
             </div>
@@ -181,11 +182,11 @@ const EnhHeadingBlockComponent: React.FC<
   }
 
   return applyTypography ? (
-    <ApplyTypography className={cn('flex flex-col w-full !gap-0', className)}>
+    <ApplyTypography className={cn('flex flex-col w-full !gap-0', className, alignMiddleClx)}>
       <Inner />
     </ApplyTypography>
   ) : (
-    <div className={cn('flex flex-col w-full gap-0', className)}>
+    <div className={cn('flex flex-col w-full gap-0', className, alignMiddleClx)}>
       <Inner />  
     </div>
   )

package/blocks/components/grid-block/table-borders.mutator.ts

@@ -39,7 +39,7 @@ const getCellClx = (
   return clx
 } 
 
-const gapClx = 'gap-0 md:gap-0 xl:gap-9'
+const gapClx = 'gap-0 md:gap-0 xl:gap-0'
 
 export default {
   getCellClx,

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

@@ -53,8 +53,10 @@ const ScreenfulComponent: React.FC<{
     (agent && agent !== 'desktop') ? 'pt-15 sm:pt-17 pb-0 px-3 sm:px-8' : '' 
   ]
 
+  const spreadId = (b.anchorId) ? {id: b.anchorId} : {}
+
   return (
-    <section className={cn('h-[100vh]', (snapTile ? 'snap-start snap-always' : ''), className)}>
+    <section {...spreadId} className={cn('h-[100vh]', (snapTile ? 'snap-start snap-always' : ''), className)}>
       <ApplyTypography className={tileHeight + 'w-full flex flex-row justify-center self-stretch'} >
         <Poster banner={b.banner}>
         {hasBannerVideo() && (

package/blocks/components/space-block.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { ldMerge } from '../../util'
+import { ldMerge, cn } from '../../util'
 
 import type { Breakpoint } from '../../types'
 import { SPACE_DEFAULTS , type TWSpaceUnit, type HeadingLevel} from '../def/space-block'
@@ -33,7 +33,7 @@ const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
     // This code path should handle a undefined or empty sizes field.
   if (!b.level) {
     if (typeof b.sizes == 'number') {
-      return <div className={`invisible w-[1px] h-${b.sizes}` } /> 
+      return <div className={cn(`invisible w-[1px] h-${b.sizes}`, className) } /> 
     }
     const _sizes: {
       [key in (Breakpoint)]?: TWSpaceUnit
@@ -50,14 +50,14 @@ const SpaceBlockComponent: React.FC<BlockComponentProps> = ({
       console.log(clx)
     }
 
-    return <div className={'invisible w-[1px] ' +  clx} />
+    return <div className={cn('invisible w-[1px] ' +  clx, className)} />
   }
 
   const Tag = TAGS[b.level]
   const heightClx = (b.level === (0 satisfies HeadingLevel as HeadingLevel)) ? 'h-4' : ''
 
   return (
-    <ApplyTypography>
+    <ApplyTypography className={className}>
       <Tag className={'invisible m-0 ' + heightClx} >&nbsp;</Tag> 
     </ApplyTypography>
   )

package/blocks/components/video-block.tsx

@@ -108,7 +108,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
       }
       return ((
         <VideoPlayer 
-          className={className} 
+          className={cn('mx-auto', className)} 
           sources={b.sources} 
           width={dim.w} 
           height={dim.h} 
@@ -125,7 +125,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
     <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
   ) : (
     <VideoPlayer 
-      className={className} 
+      className={cn('mx-auto', className)} 
       sources={b.sources} 
       width={conDim.w} 
       height={conDim.h} 

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

@@ -5,6 +5,7 @@ import type { BulletItem, GridDef } from '../../types'
 interface BulletCardsBlock extends Block {
   blockType: 'bullet-cards'
     /**
+     * no-card-border
      * borders-muted-1 / borders-muted-3 
      * default: 2 
      */

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

@@ -6,6 +6,7 @@ import type EnhHeadingBlock from './enh-heading-block'
 interface CarteBlancheBlock extends Block {
   blockType: 'carte-blanche'
     // big-padding
+    // no-outer-borders
     // no-internal-borders
     // style-ghost (no-internal-borders, no outer border, no padding)
   specifiers?: string 

package/blocks/def/screenful-block.ts

@@ -44,6 +44,9 @@ interface ScreenfulBlock extends Block {
 
     /** optional footer element below the grid */
   footer?: ReactNode
+
+    /** optional id for linking to this slide / screenful */
+  anchorId?: string  
 }
 
 export {

package/common/chat-widget.tsx

@@ -47,7 +47,7 @@ const ChatWidget: React.FC<{
   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] ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-[1002] ' +
       (showChatbot ? 'flex' : 'hidden')
     }>
       <Card className='flex flex-col h-full w-full'>
@@ -65,7 +65,7 @@ const ChatWidget: React.FC<{
       variant='outline'
       size='link'
       onClick={onClick}
-      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full'
+      className='fixed bottom-4 right-0 h-12 w-12 mx-4 rounded-full z-[1001]'
     >
       {showChatbot ? <X /> : <LuxLogo width={24} height={24} className='mt-2' />}
     </Button>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -36,7 +36,7 @@
     "hanzo"
   ],
   "scripts": {
-    "latest": "npm show @hanzo/ui version",
+    "lat": "npm show @hanzo/ui version",
     "pub": "npm publish",
     "build": "tsc",
     "tc": "tsc",

package/siteDef/main-nav.ts

@@ -11,6 +11,11 @@ export default [
     href: "https://lux.credit",
     newTab: false,
   },
+  {
+    title: "Exchange",
+    href: "https://lux.exchange",
+    newTab: false,
+  },
   {
     title: "Finance",
     href: "https://lux.finance",
@@ -26,10 +31,5 @@ export default [
     href: "https://lux.network",
     newTab: false,
   },
-  {
-    title: "Exchange",
-    href: "https://lux.exchange",
-    newTab: false,
-  },
 ] satisfies LinkDef[]
 

package/tailwind/fonts.tailwind.ts

@@ -17,7 +17,7 @@ export const fontFamily = (ignoreTheme: any): {
 }
 
 export const fontSize = {
-  xxs: ['0.7rem', { lineHeight: '0.9rem' }],    // very fine print               
+  xxs: ['0.6.5rem', { lineHeight: '0.8rem' }],    // very fine print               
   xs: ['0.8rem', { lineHeight: '1rem' }],       // fine print               
   sm: ['0.9rem', { lineHeight: '1.2rem' }],     // 'standard' some news article cards  (set manually when using typography-sm)
   base: ['1rem', { lineHeight: 1.4 }],     

package/tailwind/spacing.tailwind.js

@@ -1,4 +1,11 @@
+const percentages = {}
+for (let i = 0; i <= 100; i++) {
+  percentages[`pr-${i}`] = `${i}%` 
+}
+
+
 export default {
+  ...percentages,
   px: '1px',
   0: '0px',
   0.5: '0.125rem',
@@ -55,3 +62,4 @@ export default {
   80: '20rem',
   96: '24rem',
 }
+

package/types/grid-def.ts

@@ -10,6 +10,15 @@ interface GridDef {
   mobile?: GridColumnSpec
 }
 
+const COMMON_GRID_1_COL = {
+  at: {
+    xs: { columns: 1, gap: 2 },
+    md: { columns: 1, gap: 3 },
+    lg: { columns: 1, gap: 6 }
+  },
+  mobile: { columns: 1, gap: 2 }
+}
+
 const COMMON_GRID_2_COL = { 
     at: { 
       xs: {columns: 1, gap: 2}, 
@@ -28,10 +37,20 @@ const COMMON_GRID_3_COL = {
   mobile: {columns: 1, gap: 2}
 } as GridDef
 
+const COMMON_GRID_4_COL = { 
+  at: { 
+    xs: {columns: 1, gap: 2}, 
+    md: {columns: 2, gap: 3}, 
+    lg: {columns: 4, gap: 6}
+  },  
+  mobile: {columns: 1, gap: 2}
+} as GridDef
 
 export {
   type GridDef as default,
   type GridColumnSpec,
+  COMMON_GRID_1_COL,
   COMMON_GRID_2_COL,
-  COMMON_GRID_3_COL
+  COMMON_GRID_3_COL,
+  COMMON_GRID_4_COL
 }

package/types/index.ts

@@ -6,7 +6,7 @@ export {
   type ButtonModalDef,
 } from './button-def'
 
-export { COMMON_GRID_2_COL, COMMON_GRID_3_COL } from './grid-def'
+export { COMMON_GRID_1_COL, COMMON_GRID_2_COL, COMMON_GRID_3_COL, COMMON_GRID_4_COL } from './grid-def'
 export type {default as GridDef, GridColumnSpec} from './grid-def'
 export type { TShirtDimensions, Dimensions } from './dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'

package/types/site-def.ts

@@ -26,6 +26,9 @@ interface SiteDef {
     /** default (undefined or absent): @ui/sideDef/footer/legal are rendered */
     /** [] renders nothing above the copyright */
   aboveCopyright?: LinkDef[] 
+
+      /** any site-specific stuff we'd like access to (link urls, etc) */
+  ext?: any 
 }
 
 export { type SiteDef as default }

package/util/index.ts

@@ -74,3 +74,8 @@ export const ldMerge = (
   result: any,
   ...sources: any[]
 ): any => (_merge(result, ...sources))
+
+export const capitalize = (str: string): string => (
+  str.charAt(0).toUpperCase() + str.slice(1)
+)
+