@hanzo/ui 0.5.24 → 0.6.15

package/primitives/form.tsx

@@ -1,179 +0,0 @@
-// @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

@@ -1,144 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,30 +0,0 @@
-'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

@@ -1,28 +0,0 @@
-// @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

@@ -1,104 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,35 +0,0 @@
-'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

@@ -1,27 +0,0 @@
-'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