@hanzo/ui 4.0.4 → 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'
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "4.0.4",
+  "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",
@@ -49,6 +50,7 @@
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-context-menu": "^2.2.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",

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/context-menu.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "../util"
+
+const ContextMenu = ContextMenuPrimitive.Root
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+const ContextMenuGroup = ContextMenuPrimitive.Group
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+const ContextMenuSub = ContextMenuPrimitive.Sub
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none ' + 
+        'focus:bg-level-1 focus:text-accent data-[state=open]:bg-level-1 data-[state=open]:text-accent',
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md ' + 
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' + 
+      'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' + 
+      'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' + 
+      'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-popup min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-level-1 focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}

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

@@ -58,6 +58,26 @@ export {
   CommandSeparator,
 } from './command'
 
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+} from './context-menu'
+
+
 export {
   type DrawerProps,
   Drawer,
@@ -171,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'
@@ -179,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' 
@@ -202,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)