@hanzo/ui 3.8.16 → 3.8.18

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

@@ -91,7 +91,7 @@ const Content: React.FC<{
 }) => {
 
   // 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 pt-11 lg:pt-20 ' + ((agent !== 'phone') ? ('md:grid md:gap-8 ' + `md:grid-cols-${b.contentColumns.length} `) : '')
+  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: number): string => {
     const orderIndex = b.mobileOrder?.indexOf(columnIndex)

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

@@ -40,8 +40,8 @@ const ScreenfulComponent: React.FC<{
   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 fullScreenHeight = specified('full-screen-height')
-  const vertCenter = specified('vert-center')
+  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:
     // [
@@ -50,17 +50,17 @@ const ScreenfulComponent: React.FC<{
     //    p&m-modifiers
     // ]
   const cwclx = [
-    'xl:mx-auto overflow-y-hidden ',
+    'xl:mx-auto overflow-y-hidden h-full',
     fullScreenWidth ? '' : 'max-w-screen-xl',
-    fullScreenHeight ? 'h-full' : '',
       // desktop header: 80px / pt-20
       // mobile header: 44px / pt-11  
     narrowGutters ? 
-      'px-6 lg:px-8 2xl:px-2 pb-6 ' + (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-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
       : 
-      'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+4vh)] md:pt-[calc(80px+6vh)] ',
+      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' : '' 
   ]
@@ -88,7 +88,7 @@ const ScreenfulComponent: React.FC<{
             ...cwclx,
             snapTile ? 'absolute left-0 right-0 top-0 bottom-0 ' : 'flex min-h-screen w-full',
             contentClx,
-            vertCenter ? '!py-0 self-center' : ''
+            vertCenter ? 'self-center ' + (oneColumn ? '!py-0' : '' ) : ''
           )}
         >
           <Content block={b} agent={agent}  className='w-full'/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.16",
+  "version": "3.8.18",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/apply-typography.tsx

@@ -5,8 +5,7 @@ import { cn } from '../util'
 type TypographySize = 'responsive' | 'sm' | 'base' | 'lg' | 'xl' // if t-shirt size, do *not* be responsive
 
 const ApplyTypography: React.FC<
-  PropsWithChildren & {
-    className?: string,
+  React.ComponentProps<'div'> & {
     asTag?: 'div' | 'section' | 'nav' | 'main' | 'article',
     size?: TypographySize
   }
@@ -14,7 +13,8 @@ const ApplyTypography: React.FC<
   children,
   className='',
   asTag='div',
-  size='responsive'
+  size='responsive',
+  ...rest
 }) => {
 
     // responsive version by default
@@ -43,7 +43,7 @@ const ApplyTypography: React.FC<
   
   const Tag = asTag
   return (
-    <Tag className={cn(typoClasses, className)}>
+    <Tag {...rest} className={cn(typoClasses, className)}>
       {children}
     </Tag>
   )

package/primitives/popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-modal w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
+        'z-above-modal-2 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
         'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' +