@hanzo/ui 4.0.5 → 4.1.0

package/blocks/components/accordian-block.tsx

@@ -6,7 +6,7 @@ import {
   AccordionItem,
   AccordionTrigger,
   ApplyTypography
-} from '../../primitives'
+} from '../../primitives/index-common'
 
 import { cn } from '../../util'
 

package/blocks/components/bullet-cards-block.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { containsToken, cn } from '../../util'
 import type { Block, BulletCardsBlock } from '../def'
-import InlineIcon from '../../primitives/inline-icon'
+import InlineIcon from '../../primitives/next/inline-icon'
 
 import type BlockComponentProps from './block-component-props'
 import GridBlockComponent from './grid-block'

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

@@ -11,7 +11,7 @@ import {
   CardHeader,
   CardTitle,
   type TypographySize
-} from '../../../primitives'
+} from '../../../primitives/index-common'
 
 import type { CardBlock, VideoBlock } from '../../def'
 

package/blocks/components/card-block/link-out-button.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import type { LinkDef } from '../../../types'
-import { LinkElement, Icons } from '../../../primitives'
+import { LinkElement, Icons } from '../../../primitives/index-next'
 
 const ArrowLinkElement: React.FC<{
   def: LinkDef,

package/blocks/components/card-block/util.ts

@@ -1,5 +1,5 @@
 import type { Dimensions } from  '../../../types'
-import type {TypographySize } from '../../../primitives'
+import type {TypographySize } from '../../../primitives/index-common'
 import {
   getSpecifierData, 
   getPrimaryStartingWith, 

package/blocks/components/carte-blanche-block/index.tsx

@@ -5,7 +5,7 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-} from '../../../primitives'
+} from '../../../primitives/index-common'
 
 import { cn, containsToken } from '../../../util'
 

package/blocks/components/carte-blanche-block/variant-content-left.tsx

@@ -3,7 +3,7 @@ import {
   CardContent,
   CardFooter,
   CardHeader,
-} from '../../../primitives'
+} from '../../../primitives/index-common'
 import { cn } from '../../../util'
 import Content from '../content'
 

package/blocks/components/cta-block.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import type { LinkDef, ButtonDef} from '../../types'
-import  { buttonVariants, ActionButton, LinkElement } from '../../primitives'
+import  { buttonVariants, ActionButton, LinkElement } from '../../primitives/index-next'
 import type { CTABlock } from '../def'
 import { cn, containsToken, type VariantProps } from '../../util'
 
@@ -44,6 +44,9 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
   }
 
   const mobile2Columns = containsToken(specifiers, 'mobile-2-columns')
+    // normally 'default' buttons have a min width only at > lg.
+    // generally if more than one we don't want this and override it,
+    // but this specifier asks to observe the default behavior.
   const fillEvenly = !containsToken(specifiers, 'desktop-dont-fill')
   const mobileCenterFirstIfOdd = containsToken(specifiers, 'mobile-center-first-if-odd')
   const mobileOddFullWidth = containsToken(specifiers, 'mobile-odd-full-width')
@@ -55,11 +58,6 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
       layoutclx = 'grid grid-cols-2 gap-2 self-stretch '   
       resetMinWidth = true 
     }
-    /*
-    else {
-      layoutclx = 'flex flex-col items-stretch gap-2 self-stretch md:flex-row sm:justify-center' 
-    }
-    */
     if (fillEvenly) {
       layoutclx = (layoutclx ?? 'grid grid-cols-2 gap-2 self-stretch') 
       resetMinWidth = true 

package/blocks/components/enh-heading-block.tsx

@@ -2,11 +2,11 @@ import React, {type ElementType} from 'react'
 
 import type { Icon } from '../../types'
 import type { EnhHeadingBlock } from '../def'
-import { ApplyTypography } from '../../primitives'
+import { ApplyTypography } from '../../primitives/index-common'
 import { cn, containsToken } from '../../util'
 
 import type BlockComponentProps from './block-component-props'
-import InlineIcon from '../../primitives/inline-icon'
+import InlineIcon from '../../primitives/next/inline-icon'
 
 const DEFAULTS = {
   preheading: {

package/blocks/components/heading-block.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import type { HeadingBlock } from '../def'
-import { ApplyTypography } from '../../primitives'
+import { ApplyTypography } from '../../primitives/index-common'
 
 import type BlockComponentProps from './block-component-props'
 

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

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
 
 import type { Block, ScreenfulBlock, VideoBlock } from '../../def'
 import { containsToken, cn } from '../../../util'
-import { ApplyTypography } from '../../../primitives'
+import { ApplyTypography } from '../../../primitives/index-common'
 
 import Poster from './poster-background'
 import Content from './content'

package/blocks/components/space-block.tsx

@@ -5,7 +5,7 @@ import { ldMerge, cn } from '../../util'
 import type { Breakpoint } from '../../types'
 import { SPACE_DEFAULTS , type TWSpaceUnit, type HeadingLevel} from '../def/space-block'
 import type SpaceBlock from  '../def/space-block' 
-import { ApplyTypography } from '../../primitives'
+import { ApplyTypography } from '../../primitives/index-common'
 
 import type BlockComponentProps from './block-component-props'
 

package/blocks/components/video-block.tsx

@@ -6,7 +6,7 @@ import Image from 'next/image'
 import type { Dimensions, TShirtSize, TShirtDimensions } from '../../types'
 import { constrain, asNum, cn } from '../../util'
 import type { VideoBlock } from '../def'
-import { VideoPlayer } from '../../primitives'
+import { VideoPlayer } from '../../primitives/index-common'
 
 import type BlockComponentProps from './block-component-props'
 

package/blocks/def/cta-block.ts

@@ -3,19 +3,13 @@ import type Block from './block'
 
 interface CTABlock extends Block {
   blockType: 'cta'
-
-  /** 
-   * fill: fills the parent width with the elements
-     left / right: (>= md) left or right justify the elements (default is center)
-     mobile-2-columns: mobile defaults to rendering each element full width,
-       on it's own line. This renders them in two columns instead. 
-     mobile-center-first-if-odd: if (mobile-2-columns) and length is odd, 
-       default is to center last 
-     mobile-odd-full-width: fills the full two columns w the centered element
-     desktop-dont-fill: normally 'default' buttons have a min width only at > lg.
-       generally if more than one we don't want this and override it,
-       but this specifier asks to observe the default behavior.
-  */
+    // fill: fills the parent width with the elements
+    // left / right: (>= md) left or right justify the elements (default is center)
+    // mobile-2-columns: mobile defaults to rendering each element full width,
+    //   on it's own line. This renders them in two columns instead. 
+    // mobile-center-first-if-odd: if (mobile-2-columns) and length is odd, 
+    //   default is to center last 
+    // mobile-odd-full-width: fills the full two columns w the centered element
   specifiers?: string
   elements: (LinkDef | ButtonDef)[]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.0.5",
+  "version": "4.1.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -35,7 +35,8 @@
   },
   "exports": {
     "./blocks": "./blocks/index.ts",
-    "./primitives": "./primitives/index.ts",
+    "./primitives": "./primitives/index-next.ts",
+    "./primitives-common": "./primitives/index-common.ts",
     "./style/": "./style/*",
     "./tailwind": "./tailwind/index.ts",
     "./types": "./types/index.ts",

package/primitives/action-button.tsx

@@ -1,6 +1,5 @@
 'use client'
 import React from 'react'
-import dynamic from 'next/dynamic'
 
 import { cn, type VariantProps } from '../util'
 
@@ -8,12 +7,6 @@ import type { ButtonDef, ButtonModalDef } from '../types'
 import type { buttonVariants } from './button'
 import DVC from './dialog-video-controller'
 
-  // 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
-  // once it's been rendered and the user is already waiting.
-  // https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading
-//const DynamicDVC = dynamic(() => (import('./dialog-video-controller')), {ssr: false})
-
 const ActionButton: React.FC<
   VariantProps<typeof buttonVariants> &
   {

package/primitives/combobox.tsx

@@ -0,0 +1,143 @@
+'use client'
+import React, { useState } from 'react'
+import { Check, ChevronDown } from 'lucide-react'
+
+import { cn } from '../util'
+import Button from './button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from './command'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './popover'
+
+interface SelectElement {
+  value: string,
+  label?: string,
+  imageUrl?: string
+}
+
+const IMAGE_SIZE = 32
+
+const ElementImage: React.FC<{
+  url: string | undefined
+  alt?: string
+  w: number
+  h: number
+}> = ({
+  url,
+  alt,
+  w,
+  h
+}) => (url &&
+  <img
+    src={url}
+    alt={alt ?? 'image'}
+    height={h}
+    width={w}
+    loading="eager"
+    className="rounded-sm object-contain"
+  />
+)
+
+
+const Combobox: React.FC<{
+  elements: SelectElement[]
+  buttonClx?: string 
+  popoverClx?: string
+  buttonPlaceholder?: string
+  searchPlaceholder?: string
+  initial?: SelectElement,
+  elementSelected: (e: SelectElement) => void
+  disabled?: boolean
+}> = ({
+  elements,
+  buttonClx='',
+  popoverClx='',
+  initial,
+  searchPlaceholder='Search...',
+  buttonPlaceholder='Select...',
+  elementSelected,
+  disabled=false
+}) => {
+
+  const [open, setOpen] = useState<boolean>(false)
+  const [current, setCurrent] = useState<SelectElement | null>(initial ?? null)
+
+  const handleSelect = (selectedValue: string) => {
+
+      // some issue w case... I know, right??
+    const found = elements.find((el: SelectElement) => (el.value.toUpperCase() === selectedValue.toUpperCase()) )
+
+    if (found) {
+      setCurrent(found)
+      elementSelected(found)
+    }
+    setOpen(false)
+  }
+
+  const isCurrent = (el: SelectElement): boolean => (
+    !!current && (el.value.toUpperCase() === current.value.toUpperCase())
+  )  
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          role='combobox'
+          aria-expanded={open}
+          className={'flex justify-between ' + buttonClx}
+          disabled={disabled}
+        >
+          <div className='flex justify-start items-center gap-2'>
+            {current && (
+              <ElementImage url={current.imageUrl} w={IMAGE_SIZE} h={IMAGE_SIZE} alt={current.value + ' image'}/>
+            )}
+            <span>{ current ? (current.label ?? current.value) : buttonPlaceholder }</span>
+          </div>
+          <ChevronDown className={open ? '' : 'opacity-50'} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className={'p-0 ' + popoverClx}>
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>No element found.</CommandEmpty>
+            <CommandGroup>
+            {elements.map((element) => (
+              <CommandItem
+                key={element.value}
+                value={element.value}
+                onSelect={handleSelect}
+                className='flex justify-between'
+              >
+                <div className='flex justify-start items-center gap-2'>
+                  <ElementImage url={element.imageUrl} w={IMAGE_SIZE} h={IMAGE_SIZE} alt={element.value + ' image'}/>
+                  <span>{ element.label ?? element.value }</span>
+                </div>
+                <div>
+                  <Check className={cn('ml-auto', (isCurrent(element)) ? '' : 'invisible' )} />
+                </div>
+              </CommandItem>
+            ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export {
+  type SelectElement,
+  Combobox as default
+} 

package/primitives/command.tsx

@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted",
       className
     )}
     {...props}
@@ -117,7 +117,9 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'aria-selected:bg-level-3 aria-selected:text-accent',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}

package/primitives/{index.ts → index-common.ts}

@@ -191,7 +191,6 @@ export {
 
 export * from './tooltip' 
 
-
 export { default as ActionButton } from './action-button'
 export { default as ApplyTypography, type TypographySize} from './apply-typography'
 export { default as AspectRatio } from './aspect-ratio'
@@ -199,16 +198,11 @@ export { default as Badge } from './badge'
 export { default as BreakpointIndicator } from './breakpoint-indicator'
 export { default as Calendar } from './calendar' 
 export { default as Checkbox } from './checkbox' 
+export { default as Combobox, type SelectElement } from './combobox' 
 export { default as DialogVideoController } from './dialog-video-controller'
-export { default as Image } from './image'
-export { default as InlineIcon } from './inline-icon' 
 export { default as Input } from './input'
 export { default as Label } from './label'
-export { default as LinkElement } from './link-element'
 export { default as ListBox } from './list-box'
-export { default as MDXLink } from './mdx-link'
-export { default as MediaStack } from './media-stack' 
-export { default as NavItems} from './nav-items'
 export { default as Progress } from './progress' 
 export { RadioGroup, RadioGroupItem } from './radio-group'
 export { ScrollArea, ScrollBar } from './scroll-area' 
@@ -222,7 +216,6 @@ export { Toaster, toast } from './sonner'
 export { Toggle, toggleVariants } from './toggle'
 export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 export { default as VideoPlayer } from './video-player'
-export { default as YouTubeEmbed } from './youtube-embed'
 
 export * as Icons from './icons'
 

package/primitives/index-next.ts

@@ -0,0 +1,2 @@
+export * from './index-common'
+export * from './next'

package/primitives/{image.tsx → next/image.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
 import NextImage from 'next/image'
 
-import type { ImageDef, Dimensions, MediaTransform } from '../types'
-import { constrain, cn, spreadToTransform } from '../util'
+import type { ImageDef, Dimensions, MediaTransform } from '../../types'
+import { constrain, cn, spreadToTransform } from '../../util'
 
 const Image: React.FC<{
   def: ImageDef

package/primitives/next/index.ts

@@ -0,0 +1,7 @@
+export { default as Image } from './image'
+export { default as InlineIcon } from './inline-icon' 
+export { default as LinkElement } from './link-element' 
+export { default as MDXLink } from './mdx-link'
+export { default as MediaStack } from './media-stack'
+export { default as NavItems } from './nav-items'
+export { default as YouTubeEmbed } from './youtube-embed'

package/primitives/{inline-icon.tsx → next/inline-icon.tsx}

@@ -1,7 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { Icon } from '../types'
+import type { Icon } from '../../types'
 
 const InlineIcon: React.FC<{
     /**

package/primitives/{link-element.tsx → next/link-element.tsx}

@@ -1,9 +1,9 @@
 import React, { type PropsWithChildren } from 'react'
 import Link from 'next/link'
 
-import type { LinkDef, Icon }  from '../types'
-import { buttonVariants } from './button'
-import { cn, type VariantProps } from '../util'
+import type { LinkDef, Icon }  from '../../types'
+import { buttonVariants } from '../button'
+import { cn, type VariantProps } from '../../util'
 
   /**
    * If this is rendered directly (and not auto generated in a Block)

package/primitives/{media-stack.tsx → next/media-stack.tsx}

@@ -3,11 +3,11 @@ import React from 'react'
 
 import Spline from '@splinetool/react-spline'
 
-import { cn, constrain, spreadToTransform } from '../util'
-import type { MediaStackDef, Dimensions } from '../types'
+import { cn, constrain, spreadToTransform } from '../../util'
+import type { MediaStackDef, Dimensions } from '../../types'
 
 import Image from './image'
-import VideoPlayer from './video-player'
+import VideoPlayer from '../video-player'
 
 const MediaStack: React.FC<{
   media: MediaStackDef

package/primitives/{nav-items.tsx → next/nav-items.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { LinkDef }  from '../types'
+import type { LinkDef }  from '../../types'
 import  LinkElement from './link-element'
-import { cn } from '../util'
+import { cn } from '../../util'
 
 const NavItems: React.FC<{
   items: LinkDef[]

package/primitives/{youtube-embed.tsx → next/youtube-embed.tsx}

@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import Image from 'next/image'
 
-import * as Icons from './icons'
+import * as Icons from '../icons'
 
 // Concept based on https://www.youtube.com/watch?v=lLqRchtjN00
 // (https://github.com/a-trost/fableton)