@hanzo/ui 4.5.4 → 4.7.0

package/primitives/index-common.ts

@@ -1,224 +0,0 @@
-export { 
-  Accordion, 
-  AccordionItem, 
-  AccordionTrigger, 
-  AccordionContent 
-} from './accordion'
-
-export { 
-  Avatar, 
-  AvatarImage, 
-  AvatarFallback 
-} from './avatar'
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './breadcrumb'
-
-export {
-  default as Button,
-  type ButtonProps,
-  buttonVariants,
-} from './button'
-
-export { 
-  Card, 
-  CardHeader, 
-  CardFooter, 
-  CardTitle, 
-  CardDescription, 
-  CardContent 
-} from './card'
-
-export {
-  type CarouselApi,
-  type CarouselOptions,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from './carousel'
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  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,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHandle,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-} from './drawer'
-
-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 { 
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from './input-otp'
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-} from './navigation-menu'
-
-export { 
-  Popover, 
-  PopoverAnchor, 
-  PopoverArrow, 
-  PopoverClose, 
-  PopoverContent, 
-  PopoverTrigger, 
-} from './popover'
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-} from './select'
-
-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 { 
-  Tabs, 
-  TabsList, 
-  TabsTrigger, 
-  TabsContent 
-} from './tabs'
-
-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'
-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 ComboboxTriggerProps } from './combobox' 
-export { default as DialogVideoController } from './dialog-video-controller'
-export { default as Input } from './input'
-export { default as Label } from './label'
-export type { default as ListAdaptor } from './list-adaptor'
-export { default as ListBox } from './list-box'
-export { default as LoadingSpinner } from './loading-spinner'
-export { default as Progress } from './progress' 
-export { RadioGroup, RadioGroupItem } from './radio-group'
-export { ScrollArea, ScrollBar } from './scroll-area' 
-export { default as Separator } from './separator' 
-export { default as Slider } from './slider' 
-export { default as Skeleton } from './skeleton' 
-export { default as StepIndicator } from './step-indicator'
-export { default as Switch } from './switch' 
-export { default as TextArea } from './text-area' 
-export { Toaster, toast } from './sonner'
-export { Toggle, toggleVariants } from './toggle'
-export { ToggleGroup, ToggleGroupItem } from './toggle-group'
-export { default as VideoPlayer } from './video-player'
-
-export * as Icons from './icons'
-
-

package/primitives/index-next.ts

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

package/primitives/input-otp.tsx

@@ -1,65 +0,0 @@
-'use client'
-import * as React from 'react'
-
-import { OTPInput, type SlotProps } from 'input-otp'
-import { Dot } from 'lucide-react'
-
-import { cn } from '../util'
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn('flex items-center gap-2', className)}
-    {...props}
-  />
-))
-InputOTP.displayName = 'InputOTP'
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center', className)} {...props} />
-))
-InputOTPGroup.displayName = 'InputOTPGroup'
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<'div'>,
-  SlotProps & React.ComponentPropsWithoutRef<'div'>
->(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'relative flex h-10 w-10 items-center justify-center border-y border-r border-muted-3 text-sm ',
-        'transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-        isActive && 'z-above-content ring-2 ring-muted', // TODO: couldn't find: 'ring-offset-background' 
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='animate-caret-blink h-4 w-px bg-foreground duration-1000' />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = 'InputOTPSlot'
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<'div'>,
-  React.ComponentPropsWithoutRef<'div'>
->(({ ...props }, ref) => (
-  <div ref={ref} role='separator' {...props}>
-    <Dot />
-  </div>
-))
-InputOTPSeparator.displayName = 'InputOTPSeparator'
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

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-muted-3 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-2 ' + 
-          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 ' + 
-          '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(
-  "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/list-adaptor.ts

@@ -1,12 +0,0 @@
-interface ListAdaptor<T> {
-  getValue:   (el: T) => string
-  equals:     (el1: T, el2: T) => boolean
-  valueEquals: (el: T, v: string) => boolean
-  getLabel?:  (el: T) => string 
-  getImageUrl?:  (el: T) => string | null
-  isDisabled?: (el: T) => boolean
-}
-
-export {
-  type ListAdaptor as default
-}

package/primitives/list-box.tsx

@@ -1,74 +0,0 @@
-'use client'
-import React from 'react'
-import { cn } from '../util'
-
-function Item<T>({
-  value,
-  label,
-  className,
-  onClick,
-  first=false,
-  last=false,
-  selected=false
-}:{
-  value: T
-  label: string
-  className: string
-  onClick: (val: T) => void
-  first?: boolean
-  last?: boolean
-  selected?: boolean
-}) {
-
-  return (
-    <div 
-      className={cn(
-        'font-normal text-muted-1 px-3 py-1 cursor-pointer hover:text-foreground ', 
-        last ? '' : 'border-b', 
-        selected ? 'font-semibold text-accent hover:text-accent' : '', 
-        className
-      )} 
-      onClick={() => {onClick(value)}}
-    >
-      <span>{label}</span>
-    </div>
-  )
-}
-
-function ListBox<T>({
-  values,
-  labels,
-  onValueChange,
-  value,
-  isEqual,
-  clx = '',
-  itemClx = '' 
-}:{
-  values: T[]
-  labels: string[]
-  onValueChange: (val: T) => void
-  value: T | undefined
-  isEqual: (v1: T, v2: T) => boolean
-  clx?: string
-  itemClx?: string 
-}): JSX.Element {
-
-  return (
-    <div className={cn('border rounded-md select-none', clx)} >
-    {values.map((val, i) => (
-      <Item<T> 
-        value={val} 
-        label={labels[i]} 
-        onClick={onValueChange} 
-        className={itemClx}
-        first={i === 0}
-        last={i === values.length - 1}
-        selected={value && isEqual(val, value)}
-        key={labels[i]}
-      />
-    ))}
-    </div>
-  )
-}
-
-export default ListBox

package/primitives/loading-spinner.tsx

@@ -1,33 +0,0 @@
-import { cn } from '../util'
-
-// cf: https://github.com/shadcn-ui/ui/discussions/1694#discussioncomment-7851248
-const LoadingSpinner: React.FC<
-  {
-    size?: number
-    className?: string
-  }
-  & React.SVGProps<SVGSVGElement>
-> = ({
-  size = 24,
-  className='',
-  ...props
-}) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      {...props}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={cn("animate-spin", className)}
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  )
-}
-
-export default LoadingSpinner

package/primitives/navigation-menu.tsx

@@ -1,147 +0,0 @@
-'use client'
-import React from 'react'
-
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
-
-import { cn } from '../util'
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative z-10 flex max-w-max flex-1 items-center justify-center',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    {/* <NavigationMenuViewport /> */}
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      'group flex flex-1 list-none items-center justify-center space-x-1',
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Item
-    ref={ref}
-    className={cn("relative", className)}
-    {...props}
-  />
-))
-NavigationMenuItem.displayName = 'NavigationMenuItem'
-
-const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 ' + 
-  'text-sm font-medium transition-colors hover:bg-level-1 text-foreground hover:text-accent ' + 
-  ' focus:text-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 ' + 
-  'data-[active]:bg-level-1/50 data-[state=open]:bg-level-1/50'
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), 'group', className)}
-    {...props}
-  >
-    {children}{' '}
-    <ChevronDown
-      className='relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180'
-      aria-hidden='true'
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "right-0  absolute",
-      "absolute top-full w-fit bg-popover mt-[5px]",
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 bg-background overflow-hidden rounded-md border",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn('absolute left-0 top-full flex justify-center')}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border ',
-        'bg-background text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', 
-      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
-      className
-    )}
-    {...props}
-  >
-    <div className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md' />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}