@hanzo/ui 3.6.5 → 3.7.22

package/blocks/components/cta-block.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
 
 import type { LinkDef, ButtonDef} from '../../types'
-import  { type ButtonSizes, ActionButton, LinkElement } from '../../primitives'
+import  { buttonVariants, ActionButton, LinkElement } from '../../primitives'
 import type { CTABlock } from '../def'
-import { cn, containsToken } from '../../util'
+import { cn, containsToken, type VariantProps } from '../../util'
 
 import type BlockComponentProps from './block-component-props'
 
 const CtaBlockComponent: React.FC<BlockComponentProps & {
   itemClasses?: string
-  itemSize?: ButtonSizes,
+  itemSize?: VariantProps<typeof buttonVariants>['size'],
   renderLink?: (def: LinkDef, key: any) => JSX.Element
   renderButton?: (def: ButtonDef, key: any) => JSX.Element
 }> = ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.6.5",
+  "version": "3.7.22",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -31,9 +31,16 @@
   "scripts": {
     "lat": "npm show @hanzo/ui version",
     "pub": "npm publish",
-    "build": "tsc",
-    "tc": "tsc",
-    "clean": "rm -rf dist && rm -rf node_modules"
+    "tc": "tsc"
+  },
+  "exports": {
+    "./blocks": "./blocks/index.ts",
+    "./primitives": "./primitives/index.ts",
+    "./style/": "./style/*",
+    "./tailwind": "./tailwind/index.ts",
+    "./types": "./types/index.ts",
+    "./util": "./util/index.ts",
+    "./util-client": "./util/index-client.ts"
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
@@ -63,32 +70,33 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
-    "embla-carousel-react": "8.0.1",
+    "embla-carousel-react": "8.0.2",
     "input-otp": "^1.0.1",
     "lodash.castarray": "^4.4.0",
     "lodash.isplainobject": "^4.0.6",
     "lodash.merge": "^4.6.2",
-    "markdown-to-jsx": "^7.3.2",
-    "postcss-selector-parser": "^6.0.13",
-    "react-day-picker": "^8.7.1",
-    "react-intersection-observer": "^9.7.0",
-    "sonner": "^1.2.3",
-    "tailwind-merge": "^2.2.0",
+    "markdown-to-jsx": "^7.4.7",
+    "postcss-selector-parser": "^6.0.16",
+    "react-day-picker": "^8.10.1",
+    "react-intersection-observer": "^9.8.2",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-interaction-media": "^0.1.0",
-    "vaul": "^0.9.0"
+    "@hanzo/react-drawer": "0.9.1"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "embla-carousel": "^8.0.1",
+    "embla-carousel": "^8.0.2",
     "lucide-react": "^0.344.0",
+    "mobx": "^6.12.0",
     "next": "14.1.3",
     "next-themes": "^0.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.47.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
     "validator": "^13.11.0",
-    "zod": "3.21.4"
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@mdx-js/loader": "^3.0.0",
@@ -96,11 +104,11 @@
     "@types/facebook-pixel": "^0.0.30",
     "@types/gtag.js": "^0.0.19",
     "@types/lodash.merge": "^4.6.9",
-    "@types/mdx": "^2.0.9",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.18",
-    "embla-carousel": "^8.0.1",
-    "tailwindcss": "^3.4.1",
+    "@types/mdx": "^2.0.13",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "embla-carousel": "^8.0.2",
+    "tailwindcss": "^3.4.3",
     "typescript": "5.3.3"
   }
 }

package/primitives/action-button.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 
-import { cn } from '../util'
+import { cn, type VariantProps } from '../util'
 
 import type { ButtonDef, ButtonModalDef } from '../types'
-import type { ButtonSizes } from './button'
+import type { buttonVariants } from './button'
 
   // The DVC must be rendered client-side since it accesses the DOM directly.
   // There is no need for a loading UI since the dialog only opens
@@ -12,26 +12,27 @@ import type { ButtonSizes } from './button'
   // https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
 const DynamicDVC = dynamic(() => (import('./dialog-video-controller')), {ssr: false})
 
-const ActionButton: React.FC<{
-  def: ButtonDef
-  size?: ButtonSizes
-  className?: string
-}> = ({
+const ActionButton: React.FC<
+  VariantProps<typeof buttonVariants> &
+  {
+    def: ButtonDef
+    className?: string
+  }
+> = ({
   def,
-  size, // no default.  overrides!
-  className=''
+  className='',
+  ...rest
 }) => {
   if (def.action.type === 'modal') {
     const m = def.action.def as ButtonModalDef
     const Modal = m.Comp
-    const sizeToSpread = size ? {size} : {}
     return (
       <DynamicDVC>
         <Modal 
           title={m.title}
           byline={m.byline}
           buttonText={def.text}
-          buttonProps={{...def.props, ...sizeToSpread, className: cn((def.props?.className ?? ''), className)}}
+          buttonProps={{...def.props, ...rest, className: cn((def.props?.className ?? ''), className)}}
           action={m.action}
           actionEnclosure={m.actionEnclosure}
           {...m.props}

package/primitives/button.tsx

@@ -52,10 +52,6 @@ const buttonVariants = cva(
   }
 )
 
-type ButtonVariants = keyof typeof variant
-type ButtonSizes = keyof typeof size
-type ButtonRoundedValue = keyof typeof rounded
-
 interface ButtonProps extends
   React.ButtonHTMLAttributes<HTMLButtonElement>, 
   VariantProps<typeof buttonVariants> 
@@ -81,8 +77,5 @@ Button.displayName = "Button"
 export { 
   Button as default, 
   type ButtonProps,
-  type ButtonVariants,
-  type ButtonSizes, 
-  type ButtonRoundedValue,
   buttonVariants,
 }

package/primitives/drawer.tsx

@@ -1,12 +1,12 @@
 'use client'
 
 import * as React from 'react'
-import { Drawer as DrawerPrimitive } from 'vaul'
+import { Drawer as DrawerPrimitive, useDrawerContext } from '@hanzo/react-drawer'
 
 import { cn } from '../util'
 
 const Drawer = ({
-  shouldScaleBackground = true,
+  shouldScaleBackground = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root
@@ -18,6 +18,7 @@ Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
 const DrawerPortal = DrawerPrimitive.Portal
+const DrawerHandle = DrawerPrimitive.Handle
 const DrawerClose = DrawerPrimitive.Close
 
 const DrawerOverlay = React.forwardRef<
@@ -36,24 +37,38 @@ const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     overlayClx?: string
+    defaultHandle?: boolean
   }
->(({ className, children, overlayClx='', ...props }, ref) => (
-  <DrawerPortal>
-    {/* If no or same z index, overlay should precede content */}
-    <DrawerOverlay className={cn('z-below-modal', overlayClx)}/>
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn('fixed left-0 right-0 bottom-0 z-modal',
-        'mt-24 flex flex-col h-[80%] rounded-t-[10px] pt-6 border bg-background',
-        className
-      )}
-      {...props}
-    >
-      <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
+>(({
+  className,
+  children,
+  overlayClx='',
+  defaultHandle=true,
+  ...props
+ }, ref) => {
+
+  return (
+    <DrawerPortal>
+      {/* If no or same z index, overlay should precede content */}
+      <DrawerOverlay className={cn('z-below-modal', overlayClx)}/>
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn('fixed left-0 right-0 bottom-0 z-modal',
+          'mt-24 flex flex-col rounded-t-[10px] pt-6 border bg-background',
+          // 'h-[80%]'
+          className
+        )}
+        {...props}
+      >
+        {defaultHandle && (
+          <div className='absolute left-0 right-0 mx-auto top-2 h-2 w-[100px] rounded-full bg-level-3 shrink-0' />
+        )}
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  )
+})
+
 DrawerContent.displayName = 'DrawerContent'
 
 const DrawerHeader = ({
@@ -105,15 +120,20 @@ const DrawerDescription = React.forwardRef<
 ))
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>
+
 export {
+  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerHandle,
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  useDrawerContext
 }

package/primitives/index.ts

@@ -24,8 +24,6 @@ export {
 export {
   default as Button,
   type ButtonProps,
-  type ButtonVariants,
-  type ButtonSizes,
   buttonVariants,
 } from './button'
 
@@ -61,16 +59,19 @@ export {
 } from './command'
 
 export {
+  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerHandle,
   DrawerHeader,
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
+  useDrawerContext
 } from './drawer'
 
 export {

package/primitives/link-element.tsx

@@ -2,24 +2,26 @@ import React, { type PropsWithChildren } from 'react'
 import Link from 'next/link'
 
 import type { LinkDef, Icon }  from '../types'
-import { buttonVariants, type ButtonSizes, type ButtonVariants } from './button'
-import { cn } from '../util'
+import { buttonVariants } from './button'
+import { cn, type VariantProps } from '../util'
 
   /**
    * If this is rendered directly (and not auto generated in a Block)
    * and it has any children, title, icon, and iconAfter
    * are ignore.
    */
-const LinkElement: React.FC<PropsWithChildren & {
+const LinkElement: React.FC<
+  PropsWithChildren & 
+  VariantProps<typeof buttonVariants> & 
+{
   def: LinkDef,
-    /** overrides def */
-  variant? : ButtonVariants 
-    /** overrides def */
-  size?: ButtonSizes  
-    /** To trigger other events in addition to the 
-     * link action itself. (eg, to also close a drawer menu)  
+
+    /** 
+     * Use to trigger other events in addition to the 
+     * link action itself. For example, to also close a drawer menu.  
      */  
   onClick?: () => void  
+
     /** overrides def (eg, for title area)*/
   icon?: Icon          
     /** overrides def */
@@ -28,9 +30,10 @@ const LinkElement: React.FC<PropsWithChildren & {
 }> = ({ 
   def,
     // DO NOT provide a default to any of the props that also appear in def!
-  size, 
   onClick,
+  size, 
   variant,
+  rounded,
   icon,     
   iconAfter, 
   className = '',
@@ -42,6 +45,7 @@ const LinkElement: React.FC<PropsWithChildren & {
     newTab,
     variant: defVariant,
     size: defSize, 
+    rounded: defRounded, 
     title
   } = def
 
@@ -88,7 +92,8 @@ const LinkElement: React.FC<PropsWithChildren & {
           size: (!defVariant || defVariant.includes('link') || variant?.includes('link'))  ? 
             'link' 
             : 
-            (size ? size : defSize)
+            (size ? size : defSize),
+          rounded: rounded ?  rounded : (defRounded ? defRounded : 'md'), 
         }), 
           // This is a "label only" LinkDef.  cf: footer"
         ((href.length > 0 || onClick) ? '' : 'pointer-events-none'),

package/style/drawer.css

@@ -0,0 +1,163 @@
+/*  This is a copy of vaul/src/style.css */
+
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
+  overflow-y: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[vaul-overlay][vaul-drawer-visible='true'] {
+  opacity: 1;
+}
+
+[vaul-drawer]::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-handle] {
+  display: block;
+  position: relative;
+  opacity: 0.8;
+  margin-left: auto;
+  margin-right: auto;
+  height: 5px;
+  width: 56px;
+  border-radius: 1rem;
+  touch-action: pan-y;
+  cursor: grab;
+}
+
+[vaul-handle]:hover,
+[vaul-handle]:active {
+  opacity: 1;
+}
+
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem); /* 44px */
+  height: max(100%, 2.75rem); /* 44px */
+  touch-action: inherit;
+}
+
+[vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
+  opacity: 0;
+}
+
+[vaul-overlay][vaul-snap-points-overlay='true']:not([vaul-drawer-visible='false']) {
+  opacity: 1;
+}
+
+/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+

package/tailwind/tailwind.config.hanzo-preset.js

@@ -107,11 +107,6 @@ export default {
     }),
     borderOpacity: ({ theme }) => theme('opacity'),
     borderRadius: {
-      /*  shadcn's:  
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      */ 
       none: '0px',
       sm: '0.25rem',
       DEFAULT: '0.5rem',

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.hanzo-modules.base.json",
+  "extends": "../tsconfig.hanzo.base.json",
   "include": [
     "**/*.ts",
     "**/*.tsx",

package/types/image-def.ts

@@ -1,4 +1,3 @@
-import type { ButtonRoundedValue } from '../primitives/button'
 import type Dimensions from './dimensions'
 
   /**
@@ -25,7 +24,7 @@ interface ImageDef {
     */
   dim:  Dimensions 
 
-  rounded?: ButtonRoundedValue
+  rounded?: string // any key from tailwind.config.borderRadius
 }
 
 export {

package/types/link-def.ts

@@ -1,4 +1,5 @@
-import type { ButtonVariants, ButtonSizes } from '../primitives/button'
+import type { VariantProps } from 'class-variance-authority'
+import type { buttonVariants } from '../primitives/button'
 import type Icon  from './icon'
 
 /**
@@ -6,7 +7,7 @@ import type Icon  from './icon'
  * 
  * 
  */
-interface LinkDef {
+interface LinkDef extends VariantProps<typeof buttonVariants> {
     /**
      * If the LinkElement is rendered directly and has children, 
      * the title, icon, iconAfter fields in the supplied LinkDef 
@@ -49,9 +50,6 @@ interface LinkDef {
      * rendered as a disabled link, shows default cursor, and eats pointer events.
      */
   disabled?: boolean
-
-  variant?: ButtonVariants
-  size?: ButtonSizes
 }
 
 export {

package/util/index-client.ts

@@ -0,0 +1,3 @@
+export * from './index'
+// Must be imported from 'use client'
+export * from './step-animation'

package/util/index.ts

@@ -2,6 +2,8 @@ import { compiler as mdCompiler } from 'markdown-to-jsx'
 
 import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+export { cva, type VariantProps } from 'class-variance-authority'
+
 import type { Dimensions } from '../types'
 
   // @ts-ignore
@@ -71,4 +73,7 @@ export const capitalize = (str: string): string => (
   str.charAt(0).toUpperCase() + str.slice(1)
 )
 
-export { default as spreadToTransform } from './spread-to-transform'
+export { default as spreadToTransform } from './spread-to-transform'
+// Must be imported from 'use client'
+// export * from './step-animation'
+

package/util/step-animation.ts

@@ -0,0 +1,90 @@
+import { useEffect, useRef } from 'react'
+import { makeObservable, reaction, computed, type IReactionDisposer, observable, action } from 'mobx'
+
+interface StepAnimation {
+  notPast(step: number): boolean
+}
+
+class MyStepAnimation implements StepAnimation {
+
+  _step: number = -1
+  _reactionDisposer: IReactionDisposer | undefined = undefined
+
+  _initialStep: () => boolean
+  _intervals: number[]
+
+    /**  initialStep: false -> true: step 0
+                      true -> false: step 1
+         after intervals[0] : step 2
+         after intervals[1] : step 3
+
+        initialStep must contain at least one mobx observable and return boolean 
+        see: https://mobx.js.org/reactions.html#reaction
+    */
+  constructor(initialStep: () => boolean, intervals: number[]) {
+
+    this._initialStep = initialStep
+    this._intervals = intervals
+
+    makeObservable(this, {
+      _step: observable,
+      _setStep: action
+    })
+  }
+
+    // This is separated out because reactions have to be created
+    // once we have a valid doc / window etc. (mobx internals)
+    // Can't just do it in constructor and assign to ref
+  initialize = () => {
+    
+    const fireNext = () => {
+      this._setStep(this._step + 1)
+      if (this._step <= this._intervals.length) {
+          // No need to call clearTimeout(): https://stackoverflow.com/a/7391588/11645689
+        setTimeout(() => { fireNext() }, this._intervals[this._step - 1]) 
+      }
+    }
+
+    this._reactionDisposer = reaction(
+      this._initialStep,
+      (triggered: boolean) => {
+        if (triggered && this._step === -1) { 
+          this._setStep(0)
+        }
+          // extra safe
+        else if (this._step === 0) { 
+          fireNext()  
+        }
+      }
+    )
+  }
+
+  _setStep = (v: number): void => {this._step = v}
+
+  dispose = () => {
+    if (this._reactionDisposer) {
+      this._reactionDisposer()
+    }
+  }
+
+    // https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments
+  notPast = (step: number): boolean => (
+    computed(() => (this._step > -1 && this._step <= step)).get()
+  )
+}
+
+const useStepAnimation = (initialStep: () => boolean, intervals: number[]): StepAnimation => {
+
+  const animRef = useRef<MyStepAnimation>(new MyStepAnimation(initialStep, intervals))
+  useEffect(() => {
+    animRef.current.initialize()
+    return animRef.current.dispose 
+  }, [])
+
+  return animRef.current
+}
+
+export {
+  type StepAnimation, 
+  useStepAnimation
+}

package/util/two-way-map.ts

@@ -0,0 +1,19 @@
+class TwoWayReadonlyMap<T, K> {
+  map: Map<T, K>;
+  reverseMap: Map<K, T>;
+  constructor(map: Map<T, K>) {
+    this.map = map;
+    this.reverseMap = new Map<K, T>();
+    map.forEach((value, key) => {
+      this.reverseMap.set(value, key);
+    });
+  }
+  get(key: T) {
+    return this.map.get(key);
+  }
+  revGet(key: K) {
+    return this.reverseMap.get(key);
+  }
+}
+
+export default TwoWayReadonlyMap