@hanzo/ui 3.1.1 → 3.2.0

package/blocks/components/image-block.tsx

@@ -3,18 +3,18 @@ import Image from 'next/image'
 
 import type { Dimensions } from '../../types'
 import type { ImageBlock } from '../def'
-import { constrain, containsToken, cn } from '../../util'
+import { resolveDimensions, containsToken, cn } from '../../util'
 
 import type BlockComponentProps from './block-component-props'
 
 
 const ImageBlockComponent: React.FC<BlockComponentProps & {
-  constraint?: Dimensions
+  constraintTo?: {w: number, h: number}
 }> = ({
   block,
   className='',
   agent,
-  constraint
+  constraintTo
 }) => {
   
   if (block.blockType !== 'image') {
@@ -25,8 +25,8 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
     src, 
     alt, 
     dim, 
-    ar,
     props, 
+    sizes,
     fullWidthOnMobile, 
     svgFillClass,
     specifiers
@@ -36,9 +36,9 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
 
   const toSpread: any = {}
   if (props?.fill === undefined) {
-    const dimCon = (constraint ? constrain(dim, constraint) : dim)
-    toSpread.width = dimCon.w
-    toSpread.height = dimCon.h
+    const resolved = resolveDimensions(dim, constraintTo)
+    toSpread.width = resolved.w
+    toSpread.height = resolved.h
   } 
 
   let _alt: string
@@ -66,9 +66,10 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         sizes: '100vw',
       }
         // only for aspect ratio and to satisfy parser
-      toSpread.width = dim.w
-      toSpread.height = dim.h
-    
+      const resolved = resolveDimensions(dim)
+      toSpread.width = resolved.w
+      toSpread.height = resolved.h
+
       return (
         <div className='flex flex-col items-center w-full'>
           <Image src={src} alt={_alt} {...toSpread} className={cn(_svgFillClass, className)}/>
@@ -83,13 +84,15 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         props.style.width = props.style.width *.75 
       }
       else if (props?.style && !props?.style.width) {
-        if (dim) {
-          toSpread.width = +dim.w * .75
-          toSpread.height = +dim.h * .75
-        } 
+        const resolved = resolveDimensions(dim)
+        toSpread.width = resolved.w * .75
+        toSpread.height = resolved.w * .75
       }
     }
   }
+  if (sizes) {
+    toSpread.sizes = sizes
+  }
 
   const right = containsToken(specifiers, 'right')
   const center = containsToken(specifiers, 'center')

package/blocks/components/video-block.tsx

@@ -13,17 +13,17 @@ import type BlockComponentProps from './block-component-props'
 const VideoBlockComponent: React.FC<BlockComponentProps & {
   usePoster?: boolean
   size?: TShirtSize
-  constraint?: Dimensions
+  constrainTo?: {w: number, h: number}
 }> = ({
   block,
   className='',
   agent,
   usePoster=false,
   size='md',
-  constraint
+  constrainTo
 }) => {
 
-  const [_dim, setDim] = useState<Dimensions | undefined>(undefined)
+  const [_dim, setDim] = useState<{w: number, h: number} | undefined>(undefined)
 
   const onResize = () => { 
     setDim({
@@ -69,7 +69,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
         }} />
       }
       else {
-        const width = ((b.sizing.mobile.vw / 100) * asNum(_dim.w))
+        const width = ((b.sizing.mobile.vw / 100) * _dim.w)
         const dim  = {
           h: width / ar,
           w: width
@@ -101,7 +101,8 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
       }} />
     }
     else {
-      const height = ((b.sizing.vh / 100) * asNum(_dim.h))
+
+      const height = ((b.sizing.vh / 100) * _dim.h)
       const dim  = {
         h: height,
         w: height * ar
@@ -119,8 +120,8 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   }
   
   const videoDims = b.dim as TShirtDimensions
-  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as Dimensions
-  const conDim = (constraint ? constrain(dim, constraint) : dim) 
+  const dim = ((size && size in videoDims) ? videoDims[size] : videoDims.md) as {w: number, h: number}
+  const conDim = (constrainTo ? constrain(dim, constrainTo) : dim) 
   return usePoster ? (
     <Image src={b.poster!} alt='image' width={conDim.w} height={conDim.h} className={className}/>
   ) : (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "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/carousel.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import * as React from 'react'
-import useEmblaCarousel, { type UseEmblaCarouselType, type EmblaOptionsType } from 'embla-carousel-react'
+import useEmblaCarousel, { type EmblaOptionsType, type EmblaCarouselType } from 'embla-carousel-react'
 import Autoplay from 'embla-carousel-autoplay'
 import { ArrowLeft, ArrowRight } from 'lucide-react'
 
 import { cn } from '../util'
 import Button from './button'
 
-type CarouselApi = UseEmblaCarouselType[1]
+type CarouselApi = EmblaCarouselType  
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 type CarouselOptions = UseCarouselParameters[0]
 type CarouselPlugins = UseCarouselParameters[1]
@@ -18,6 +18,7 @@ type CarouselProps = {
   plugins?: CarouselPlugins
   orientation?: 'horizontal' | 'vertical'
   setApi?: (api: CarouselApi) => void
+  onSelect?: (api: CarouselApi) => void 
 }
 
 type CarouselContextProps = {
@@ -53,6 +54,7 @@ const Carousel = React.forwardRef<
       plugins,
       className,
       children,
+      onSelect: _onSelect,
       ...props
     },
     ref
@@ -74,6 +76,9 @@ const Carousel = React.forwardRef<
 
       setCanScrollPrev(api.canScrollPrev())
       setCanScrollNext(api.canScrollNext())
+      if (_onSelect) {
+        _onSelect(api)
+      }
     }, [])
 
     const scrollPrev = React.useCallback(() => {

package/primitives/image.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import NextImage from 'next/image'
+
+import type { ImageDef } from '../types'
+import { resolveDimensions, cn } from '../util'
+
+const Image: React.FC<{
+  def: ImageDef
+  constrainTo?: {w: number, h: number}
+  fullWidth?: boolean
+  className?: string
+  preload?: boolean
+}> = ({
+  def,
+  constrainTo,
+  fullWidth=false,
+  className='',
+  preload=false
+}) => {
+  
+  const {
+    src, 
+    alt: _alt, 
+    dim, 
+    sizes,
+    svgFillClass: _svgFillClass,
+  } = def
+
+  const toSpread: any = {}
+  if (fullWidth) {
+    toSpread.style = {
+      width: '100%',
+      height: 'auto',
+    }
+    if (constrainTo) {
+      toSpread.style.maxWidth = constrainTo.w  
+      toSpread.style.maxHeight = constrainTo.h  
+    }
+  }
+  else {
+    const resolved = resolveDimensions(dim, constrainTo)
+    toSpread.width = resolved.w
+    toSpread.height = resolved.h
+  } 
+
+  if (sizes) {
+    toSpread.sizes = sizes
+  }
+
+    // Note: cannot be spread (a Next thing)
+  let alt: string
+  if (_alt) {
+    alt = _alt
+  }
+  else {
+    const tokens = src.split('/')
+      // Something remotely meaningful
+    alt = (tokens.length > 0) ? tokens[tokens.length - 1] : src
+  }
+
+  const svgFillClass = _svgFillClass ?? ''
+
+  return (fullWidth) ? (
+    <div className='relative flex flex-col items-center w-full'>
+      <NextImage src={src} alt={alt} {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>
+    </div>
+  ) : (
+    <NextImage src={src} alt={alt} {...toSpread} priority={preload} loading={preload ? 'eager' : 'lazy'} className={cn(svgFillClass, className)}/>   
+  )
+}
+
+export default Image
+

package/primitives/index.ts

@@ -173,6 +173,7 @@ export { default as Switch } from './switch'
 export { default as TextArea } from './text-area' 
 export { default as Calendar } from './calendar' 
 export { default as Checkbox } from './checkbox' 
+export { default as Image } from './image'
 export { default as Progress } from './progress' 
 export { default as Separator } from './separator' 
 export { default as Skeleton } from './skeleton' 
@@ -183,3 +184,5 @@ export { default as ListBox } from './list-box'
 export { default as StepIndicator } from './step-indicator'
 
 export * as Icons from './icons'
+
+

package/primitives/label.tsx

@@ -9,7 +9,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../util"
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
 const Label = React.forwardRef<

package/primitives/radio-group.tsx

@@ -22,19 +22,31 @@ RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    larger?: boolean
+  }
+>(({
+  larger=false, 
+  className, 
+  ...props 
+}, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-muted text-foreground ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        larger ? 'h-5 w-5' : 'h-4 w-4',
+        'aspect-square rounded-full border border-muted text-foreground ring-offset-background ' ,
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      <RadioGroupPrimitive.Indicator className="w-full h-full flex items-center justify-center">
+        <div className={cn(
+          larger ? 'h-[70%] w-[70%] ' : 'h-[75%] w-[75%]',
+          'rounded-full aspect-square bg-foreground' , 
+        )}/>
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )

package/types/dimensions.ts

@@ -1,20 +1,14 @@
-// From Next Image Dim
 type Dimensions = {
-  w: number | `${number}`
-  h: number | `${number}`
-}
-
-type TShirtDimensions = { 
-  xs?: Dimensions            
-  sm?: Dimensions 
-  md:  Dimensions 
-  lg?: Dimensions 
-  xl?: Dimensions
+  w: number
+  ar: number
+} | {
+  h: number
+  ar: number
+} | {
+  w: number
+  h: number
 }
 
 export {
-  type Dimensions,
-  type TShirtDimensions
+  type Dimensions as default
 }
-
-  

package/types/image-def.ts

@@ -1,4 +1,4 @@
-import type { Dimensions } from './dimensions'
+import type Dimensions from './dimensions'
 
   /**
    * Defines a in image to render.
@@ -9,6 +9,8 @@ interface ImageDef {
   src: string     
     /** defaults to short filename */ 
   alt?: string
+    /** See next js docs */
+  sizes?: string
     /** 
      * Tailwind class for svg files (usually a text-<color>).  
      * All affect 'fill' props in the svg file 
@@ -21,7 +23,6 @@ interface ImageDef {
      * can determine the aspect ratio
     */
   dim:  Dimensions 
-  ar?: number
 }
 
 export {

package/types/index.ts

@@ -8,7 +8,8 @@ export {
 
 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 { default as Dimensions } from './dimensions' 
+export type { default as TShirtDimensions } from './tshirt-dimensions' 
 export type { ContactInfo, ContactInfoFields } from './contact-info'
 
 export type { default as BulletItem } from './bullet-item'

package/types/tshirt-dimensions.ts

@@ -0,0 +1,20 @@
+type ConcreteDimensions = {
+  w: number
+  h: number
+}
+
+  // TODO: This is only used by VideoDef. 
+  // Is there a better way w @next/video?  
+type TShirtDimensions = { 
+  xs?: ConcreteDimensions            
+  sm?: ConcreteDimensions 
+  md:  ConcreteDimensions 
+  lg?: ConcreteDimensions 
+  xl?: ConcreteDimensions
+}
+
+export {
+  type TShirtDimensions as default
+}
+
+  

package/types/video-def.ts

@@ -1,4 +1,4 @@
-import type { TShirtDimensions } from './dimensions'
+import type TShirtDimensions from './tshirt-dimensions'
 
 interface VideoDef {
   videoProps?: any   // For example,

package/util/index.ts

@@ -50,16 +50,16 @@ export const asNum = (n: number | `${number}`): number => (
   (typeof n === 'number') ? n : parseInt(n, 10)  
 )
 
+export const resolveDimensions = (dim: Dimensions, constraint?: {w: number, h: number}): {w: number, h: number} => {
+
+  const resolved = ('w' in dim) ? 
+    (('h' in dim) ? {w: dim.w, h: dim.h} : { w: dim.w, h: dim.w / dim.ar }) : { w: dim.h * dim.ar, h: dim.h }
+
+  return constraint ? constrain(resolved, constraint) : resolved
+}
+
   // https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
-export const constrain = (dim: Dimensions, constraint: Dimensions): Dimensions => {
-  const c = {
-    w: asNum(constraint.w),
-    h: asNum(constraint.h)
-  }
-  const d = {
-    w: asNum(dim.w),
-    h: asNum(dim.h)
-  }
+export const constrain = (d: {w: number, h: number}, c: {w: number, h: number}): {w: number, h: number} => {
 
   const ratio = Math.min(c.w / d.w, c.h / d.h)
   return {