@hanzo/ui 3.0.9 → 3.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.0.9",
+  "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/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