@hanzo/ui 3.6.4 → 3.7.0

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.4",
+  "version": "3.7.0",
   "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,15 @@
   "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"
   },
   "dependencies": {
     "@next/third-parties": "^14.1.0",
@@ -63,30 +69,30 @@
     "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"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "embla-carousel": "^8.0.1",
+    "embla-carousel": "^8.0.2",
     "lucide-react": "^0.344.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-hook-form": "^7.51.3",
     "validator": "^13.11.0",
     "zod": "3.21.4"
   },
@@ -96,11 +102,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.2.79",
+    "@types/react-dom": "^18.2.25",
+    "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

@@ -6,7 +6,7 @@ import { Drawer as DrawerPrimitive } from 'vaul'
 import { cn } from '../util'
 
 const Drawer = ({
-  shouldScaleBackground = true,
+  shouldScaleBackground = false,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root
@@ -36,24 +36,35 @@ const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
     overlayClx?: string
+      // Redundancy of 'modal' sent to Root, since we have no access to that.
+      // Hack that avoids forking their code.
+    modal?: 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='', modal=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
+        )}
+          // A bug / omission in Vaul
+        onFocusOutside={(e) => { if (!modal) { e.preventDefault(); return } }}
+        onEscapeKeyDown={(e) => { if (!modal) { e.preventDefault(); return } }}
+        {...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>
+  )
+})
+
 DrawerContent.displayName = 'DrawerContent'
 
 const DrawerHeader = ({
@@ -105,7 +116,10 @@ const DrawerDescription = React.forwardRef<
 ))
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>
+
 export {
+  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,

package/primitives/index.ts

@@ -24,8 +24,6 @@ export {
 export {
   default as Button,
   type ButtonProps,
-  type ButtonVariants,
-  type ButtonSizes,
   buttonVariants,
 } from './button'
 
@@ -61,6 +59,7 @@ export {
 } from './command'
 
 export {
+  type DrawerProps,
   Drawer,
   DrawerPortal,
   DrawerOverlay,

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/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/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.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,5 @@ 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'
+

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