@hanzo/ui 0.5.10

package/primitives/form.tsx

@@ -0,0 +1,179 @@
+// @ts-nocheck
+'use client'
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+
+import {
+  Controller,
+  type ControllerProps,
+  FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "../util"
+import Label from "./label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-1", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  const classes = 'text-xs font-medium py-1 ' + 
+                  (error ? 'text-destructive' : 'text-muted-1') + 
+                  (body ? '' : ' invisible') // Hold space in the layout
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn(classes, className)}
+      {...props}
+    >
+      {body ? body : 'dummy'}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/primitives/index.ts

@@ -0,0 +1,144 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
+export { default as ApplyTypography, type TypographySize} from './apply-typography'
+export { default as ActionButton } from './action-button'
+
+export {
+  default as Button,
+  type ButtonProps,
+  type ButtonVariants,
+  type ButtonSizes,
+  buttonVariants,
+} from './button'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card'
+export { default as DialogVideoController } from './dialog-video-controller'
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './dialog'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+} from './form'
+
+export { default as Input } from './input'
+export { default as Label } from './label'
+export { default as LinkElement } from './link-element'
+export { default as MDXLink } from './mdx-link'
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+} from './sheet'
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from './table'
+
+export { default as TailwindIndicator } from './tailwind-indicator'
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+} from './toast'
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+} from './select'
+
+export { 
+  Popover, 
+  PopoverTrigger, 
+  PopoverContent, 
+  PopoverAnchor 
+} from './popover'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './command'
+
+export { 
+  Tabs, 
+  TabsList, 
+  TabsTrigger, 
+  TabsContent 
+} from './tabs'
+
+export { 
+  Avatar, 
+  AvatarImage, 
+  AvatarFallback 
+} from './avatar'
+
+export { ScrollArea, ScrollBar } from './scroll-area' 
+
+export { Toaster } from './toaster'
+export { useToast, toast } from './use-toast'
+
+export { default as VideoPlayer } from './video-player'
+export { default as YouTubeEmbed } from './youtube-embed'
+export { default as Switch } from './switch' 
+export { default as TextArea } from './text-area' 
+export { default as Calendar } from './calendar' 
+export { default as Checkbox } from './checkbox' 
+export { default as Progress } from './progress' 
+export { default as Separator } from './separator' 
+export { default as Skeleton } from './skeleton' 
+export { default as InlineIcon } from './inline-icon' 
+export { default as NavItems} from './nav-items'
+export { default as Main } from './main'
+

package/primitives/inline-icon.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Image from 'next/image'
+
+import type { Icon } from '../types'
+
+const InlineIcon: React.FC<{
+    /**
+     * If a ReactNode is passed in, it should be set to 'w-full h-auto' so that it can be sized
+     * according to width of parent. 
+     */
+  icon: Icon | string
+    /** default should be handled by calling code. */
+  size?: number
+
+  agent?: string,
+  className?: string
+}> = ({
+  icon,
+  size, 
+  agent,
+  className=''
+}) => {
+  if (!icon) return null
+
+  const phone = agent === 'phone'
+  if (typeof icon === 'string') {
+    const _size = (phone && size) ? (size * .75) : size
+    return (<Image src={icon} width={_size} height={_size} alt='icon' className={className}/>)
+  }
+  return (
+    <div className={className}>
+      {icon as Icon}
+    </div>
+  )
+}
+
+export default InlineIcon

package/primitives/input.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import React from "react"
+
+import { cn } from "../util"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-inherit px-3 py-2 text-sm ring-offset-background ' + 
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-1 ' + 
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' + 
+          'first-letter:disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export default Input

package/primitives/label.tsx

@@ -0,0 +1,28 @@
+// @ts-nocheck
+"use client"
+
+import React from "react"
+// @ts-ignore
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../util"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export default Label

package/primitives/link-element.tsx

@@ -0,0 +1,104 @@
+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'
+
+  /**
+   * 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 & {
+  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)  
+     */  
+  onClick?: () => void  
+    /** overrides def (eg, for title area)*/
+  icon?: Icon          
+    /** overrides def */
+  iconAfter?: boolean   
+  className?: string,
+}> = ({ 
+  def,
+    // DO NOT provide a default to any of the props that also appear in def!
+  size, 
+  onClick,
+  variant,
+  icon,     
+  iconAfter, 
+  className = '',
+  children,
+} ) => {
+
+  const {
+    href,
+    newTab,
+    variant: defVariant,
+    size: defSize, 
+    title
+  } = def
+
+  const linkProps: any = {}
+
+      // As per LinkDef docs
+  if (href.startsWith('http') || href.startsWith('mailto')) { 
+    linkProps.rel = 'noreferrer noopener'
+    if (newTab !== undefined || newTab === true) {
+      linkProps.target = '_blank'
+    }
+  } 
+  else if (newTab !== undefined && newTab === true) {
+    linkProps.target = '_blank'
+  }
+
+  const toSpread = {
+    href,
+    ...(onClick ? { onClick } : {}),
+    ...linkProps
+  }
+
+  const Contents: React.FC = () => {
+
+    if (React.Children.count(children) > 0) return children
+
+      // Props > def fields > defaults.
+    const _icon = (icon) ? icon : (def.icon) ? def.icon : undefined
+    const _iconAfter = (iconAfter) ? iconAfter : (def.iconAfter) ? def.iconAfter : false
+
+      // 'title' is not guaranteed as it could be an icon only button / link
+    return (<>
+      {_icon && !_iconAfter && (<div className='pr-1'>{_icon}</div>)}
+      {title && (<div>{title}</div>)}
+      {_icon && _iconAfter  && (<div className='pl-1'>{_icon}</div>)}
+    </>)
+  }
+
+  return (
+    <Link
+      className={cn(
+        buttonVariants({ 
+          variant: variant ?  variant : (defVariant ? defVariant : 'link'), 
+          size: (!defVariant || defVariant.includes('link') || variant?.includes('link'))  ? 
+            'link' 
+            : 
+            (size ? size : defSize)
+        }), 
+          // This is a "label only" LinkDef.  cf: footer"
+        ((href.length > 0 || onClick) ? '' : 'pointer-events-none'),
+        className 
+      )}
+      {...toSpread}
+    >
+      <Contents />
+    </Link>
+  )
+}
+
+export default LinkElement

package/primitives/main.tsx

@@ -0,0 +1,17 @@
+import React, { type PropsWithChildren } from 'react'
+import { cn } from '../util'
+
+const c = 'max-w-screen-2xl 2xl:w-[1500px] lg:mx-auto ' + 
+  'flex flex-col justify-start items-stretch ' +
+  'p-4 md:px-6 lg:px-8 '
+
+const Main: React.FC<PropsWithChildren & { className?: string }> = ({
+  children,
+  className='',
+}) => (
+  <main className={cn(c, className)}>
+    {children}
+  </main>
+)
+
+export default Main

package/primitives/mdx-link.tsx

@@ -0,0 +1,22 @@
+import React,  { type AnchorHTMLAttributes, type PropsWithChildren } from 'react'
+import Link from 'next/link'
+
+const MDXLink: React.FC<AnchorHTMLAttributes<HTMLAnchorElement> > = ({
+  href,
+  children,
+  ...rest
+}) => {
+
+    // internal link
+  if (href && (href.startsWith('/'))) {
+    return (
+      <Link href={href} {...rest}>
+        {children}
+      </Link>
+    )
+  }
+
+  return <a target="_blank" href={href} {...rest} >{children}</a>
+}
+
+export default MDXLink

package/primitives/nav-items.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import type { LinkDef }  from '../types'
+import  LinkElement from './link-element'
+import { cn } from '../util'
+
+const NavItems: React.FC<{
+  items: LinkDef[]
+  className?: string,
+  as?: React.ElementType
+  itemClx?: string | ((def: LinkDef) => string),
+  currentAs?: string
+}> = ({ 
+  items,
+  className='', 
+  itemClx,
+  as: Tag='nav',  
+  currentAs 
+}) => ( items.length ? (
+  <Tag className={className} >
+  {items.map((item, index) => {
+
+    const variant = item.variant ?? 'link'
+    let internalClx = '' 
+
+      // note that linkFG (or any other variant of 'link') 
+      // will not get assigned these classes,
+      // and will remain styles is 'foreground' (hence the name)
+    if (variant === 'link') {
+      internalClx += 'text-nav hover:text-nav-hover '
+      if (currentAs && currentAs === item.href) {
+        internalClx += 'text-nav-current '
+      }
+    } 
+    else {
+      internalClx+= 'min-w-0 lg:min-w-0 '   
+    }
+    if (currentAs && currentAs === item.href) {
+      internalClx += 'pointer-events-none '
+    }
+
+    const _itemClx = (itemClx) ? (typeof itemClx === 'string' ? itemClx : itemClx(item)) : '' 
+    return (<LinkElement def={item} key={index} className={cn( internalClx, _itemClx)} />)
+  })}
+  </Tag>) : null
+)
+
+export default NavItems

package/primitives/popover.tsx

@@ -0,0 +1,35 @@
+'use client'
+import React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '../util'
+
+const Popover = PopoverPrimitive.Root
+const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-level-1 p-4 text-foreground shadow-md outline-none ' + 
+        '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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/primitives/progress.tsx

@@ -0,0 +1,27 @@
+'use client'
+import React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '../util'
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative h-4 w-full overflow-hidden rounded-full bg-level-2',
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className='h-full w-full flex-1 bg-accent transition-all'
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export default Progress