@hanzo/ui 3.0.7 → 3.0.10

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

@@ -13,7 +13,7 @@ import {
   type TypographySize
 } from '../../../primitives'
 
-import type { CardBlock } from '../../def'
+import type { CardBlock, VideoBlock } from '../../def'
 
 import ImageBlockComponent from '../image-block'
 import VideoBlockComponent from '../video-block'
@@ -93,8 +93,8 @@ const CardBlockComponent: React.FC<BlockComponentProps & {
     <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 video, and that the 'sm' variant is there.
-        width: (card.media.dim as TShirtDimensions).sm!.w 
+          // If this layout has been specified, assume media is video, and that the 'sm' dim exists.
+        width: (card.media as VideoBlock).dim.sm!.w 
       }}>
         <VideoBlockComponent 
           block={card.media} 

package/blocks/def/video-block.ts

@@ -1,26 +1,7 @@
-import type { TShirtDimensions } from '../../types'
-import type Block from './block'
+import type { VideoDef } from '../../types'
 
-interface VideoBlock extends Block {
+interface VideoBlock extends VideoDef {
   blockType: 'video'
-  videoProps?: any   // For example,
-    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-      videoProps: {
-        autoPlay: true, 
-        loop: true, 
-        muted: true, 
-        playsInline: true
-      }, 
-
-      Valueless props are boolean.  
-      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
-    ~~~~~~~~~~~~~~~~~~~~~~~~ */
-
-  poster?: string      
-  sources?: string[]
-  dim: TShirtDimensions 
-    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
-  sizing?: any
 }
 
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.0.7",
+  "version": "3.0.10",
   "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/accordion.tsx

@@ -29,13 +29,12 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline ",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))

package/primitives/carousel.tsx

@@ -1,14 +1,12 @@
 'use client'
 
 import * as React from 'react'
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from 'embla-carousel-react'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
 import Autoplay from "embla-carousel-autoplay"
+import { ArrowLeft, ArrowRight } from 'lucide-react'
 
 import { cn } from '../util'
-import { Button } from '.'
+import Button from './button'
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package/primitives/drawer.tsx

@@ -26,7 +26,7 @@ const DrawerOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Overlay
     ref={ref}
-    className={cn('fixed inset-0 z-20 bg-background', className)}
+    className={cn('fixed inset-0 z-20 bg-background opacity-60 backdrop-blur-sm', className)}
     {...props}
   />
 ))

package/primitives/index.ts

@@ -169,5 +169,6 @@ export { default as InlineIcon } from './inline-icon'
 export { default as NavItems} from './nav-items'
 export { default as Main } from './main'
 export { default as ListBox } from './list-box'
+export { default as StepIndicator } from './step-indicator'
 
 export * as Icons from './icons'

package/primitives/step-indicator.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import { cn } from '../util'
+
+const StepIndicator: React.FC<{
+  steps: string[]
+  currentStep: number
+  dotSizeRem: number 
+  className?: string
+  muted?: boolean
+}> = ({
+  steps,
+  currentStep,
+  dotSizeRem,
+  className='',
+  muted=false
+}) => {
+
+  const pX = `calc(${1 / (steps.length * 2) * 100}% - ${dotSizeRem / 2}rem)`
+
+  return ( 
+    <div className={cn('flex flex-col', className)}>
+      <div 
+        key='one' 
+        /* id='FOO' */
+        className='flex flex-row items-center justify-start w-full'
+        style={{ paddingLeft: pX, paddingRight: pX }}
+      >
+        {steps.map((ignore, index) => (<>
+          {index !== 0 && (<div key={`sep-${index}`} className={'h-[1px] grow ' + (muted ? 'bg-muted' : 'bg-foreground')}/>)}
+          <div 
+            key={`circle-${index}`} 
+            style={{width: `${dotSizeRem}rem`, height: `${dotSizeRem}rem`}} 
+            className={cn(
+              'shrink-0 rounded-full border-[1.5px] ' + (muted ? 'border-muted' : 'border-foreground') , 
+              currentStep === index ? (muted ? 'bg-muted' : 'bg-foreground') : ''
+            )} 
+          />
+        </>))}
+      </div>
+      <div key='two' className={'grid ' + `grid-cols-${steps.length}` /* These are white listed already */} >
+        {steps.map((label, index) => (
+          <div key={index} className={'text-center whitespace-nowrap ' + (muted ? 'text-muted' : 'text-foreground')} >{label}</div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default StepIndicator

package/types/bullet-item.ts

@@ -1,4 +1,4 @@
-import type { Icon } from '.'
+import type Icon from './icon'
 
 interface BulletItem {
   text: string,

package/types/index.ts

@@ -16,4 +16,5 @@ export type { default as Icon } from './icon'
 export type { default as ImageDef } from './image-def'
 export type { default as LinkDef } from './link-def'
 export type { default as TShirtSize } from './t-shirt-size' 
+export type { default as VideoDef } from './video-def'
 

package/types/link-def.ts

@@ -1,5 +1,5 @@
 import type { ButtonVariants, ButtonSizes } from '../primitives/button'
-import type { Icon }  from '.'
+import type Icon  from './icon'
 
 /**
  * A Conf object for the LinkElement primitive.

package/types/video-def.ts

@@ -0,0 +1,25 @@
+import type { TShirtDimensions } from './dimensions'
+
+interface VideoDef {
+  videoProps?: any   // For example,
+    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+      videoProps: {
+        autoPlay: true, 
+        loop: true, 
+        muted: true, 
+        playsInline: true
+      }, 
+
+      Valueless props are boolean.  
+      NOTE: Must be camalCase as per React conventions! (playsinline => playsInline)
+    ~~~~~~~~~~~~~~~~~~~~~~~~ */
+  poster?: string      
+  sources?: string[]
+  dim: TShirtDimensions 
+    //  These are suppored so far: { vh: 60, mobile: {vw: 70} }
+  sizing?: any
+}
+
+export {
+  type VideoDef as default
+}