@hanzo/ui 4.6.0 → 4.7.0

package/primitives/breadcrumb.tsx

@@ -1,130 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { ChevronRight, MoreHorizontal } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-
-type BreadcrumbProps = React.ComponentPropsWithoutRef<'nav'> & {
-  separator?: React.ReactNode;
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-const Breadcrumb = ({ ref, ...props }: BreadcrumbProps) => (
-  <nav aria-label="breadcrumb" ref={ref} {...props} />
-);
-
-Breadcrumb.displayName = 'Breadcrumb';
-
-type BreadcrumbListProps = React.ComponentPropsWithoutRef<'ol'> & {
-  ref?: React.RefObject<HTMLOListElement>;
-};
-
-const BreadcrumbList = ({ className, ref, ...props }: BreadcrumbListProps) => (
-  <ol
-    className={cn(
-      'text-text-secondary flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-);
-BreadcrumbList.displayName = 'BreadcrumbList';
-
-type BreadcrumbItemProps = React.ComponentPropsWithoutRef<'li'> & {
-  ref?: React.RefObject<HTMLLIElement>;
-};
-
-const BreadcrumbItem = ({ className, ref, ...props }: BreadcrumbItemProps) => (
-  <li
-    className={cn('inline-flex items-center gap-1.5', className)}
-    ref={ref}
-    {...props}
-  />
-);
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-
-type BreadcrumbLinkProps = React.ComponentPropsWithoutRef<'a'> & {
-  asChild?: boolean;
-  ref?: React.RefObject<HTMLAnchorElement>;
-};
-
-const BreadcrumbLink = ({
-  asChild,
-  className,
-  ref,
-  ...props
-}: BreadcrumbLinkProps) => {
-  const Comp = asChild ? Slot : 'a';
-
-  return (
-    <Comp
-      className={cn('hover:text-text-default transition-colors', className)}
-      ref={ref}
-      {...props}
-    />
-  );
-};
-BreadcrumbLink.displayName = 'BreadcrumbLink';
-
-type BreadcrumbPageProps = React.ComponentPropsWithoutRef<'span'> & {
-  ref?: React.RefObject<HTMLSpanElement>;
-};
-
-const BreadcrumbPage = ({ className, ref, ...props }: BreadcrumbPageProps) => (
-  <span
-    aria-current="page"
-    aria-disabled="true"
-    className={cn('text-text-default font-normal', className)}
-    ref={ref}
-    role="link"
-    {...props}
-  />
-);
-BreadcrumbPage.displayName = 'BreadcrumbPage';
-
-type BreadcrumbSeparatorProps = React.ComponentProps<'li'> & {
-  ref?: React.RefObject<HTMLLIElement>;
-};
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: BreadcrumbSeparatorProps) => (
-  <li
-    aria-hidden="true"
-    className={cn('[&>svg]:h-4 [&>svg]:w-4', className)}
-    role="presentation"
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-);
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) => (
-  <span
-    aria-hidden="true"
-    className={cn('flex h-9 w-9 items-center justify-center', className)}
-    role="presentation"
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
-BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-};

package/primitives/breakpoint-indicator.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-const BreakpointIndicator: React.FC = () => {
-  
-  if (process?.env?.NODE_ENV !== undefined && process.env.NODE_ENV === "production") return null
-
-  return (
-    <div className="fixed bottom-1 left-1 z-floating flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-primary">
-      <div className="block sm:hidden">xs</div>
-      <div className="hidden sm:block md:hidden">sm</div>
-      <div className="hidden md:block lg:hidden">md</div>
-      <div className="hidden lg:block xl:hidden">lg</div>
-      <div className="hidden xl:block 2xl:hidden">xl</div>
-      <div className="hidden 2xl:block">2xl</div>
-    </div>
-  )
-}
-
-export default BreakpointIndicator

package/primitives/button.tsx

@@ -1,82 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 border border-transparent text-sm font-semibold transition-colors focus-visible:ring-1 focus-visible:ring-gray-50 focus-visible:outline-hidden focus-visible:ring-inset',
-  {
-    variants: {
-      variant: {
-        default:
-          'bg-brand hover:bg-brand-500 text-black disabled:bg-gray-800 disabled:text-gray-400 disabled:opacity-60',
-        destructive:
-          'disabled:text-text-secondary bg-red-500 text-white hover:bg-red-500/90 disabled:bg-gray-600',
-        outline:
-          'border border-gray-600 bg-transparent text-white hover:border-gray-400 hover:bg-gray-900 hover:text-white',
-        tertiary:
-          'bg-transparent text-gray-300 hover:bg-gray-900 hover:text-white',
-        link: 'text-white underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-[50px] px-8 text-sm',
-        xs: 'h-[34px] gap-1.5 px-3 text-xs',
-        sm: 'h-[36px] gap-1.5 px-3 text-xs',
-        md: 'h-[40px] gap-1.5 px-3 text-xs',
-        lg: 'h-[48px] gap-2 px-2 text-sm',
-        icon: 'h-9 w-9',
-        auto: 'h-auto p-4',
-      },
-      rounded: {
-        full: 'rounded-full',
-        lg: 'rounded-lg',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-      rounded: 'full',
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  isLoading?: boolean;
-  ref?: React.RefObject<HTMLButtonElement>;
-}
-
-const Button = ({
-  className,
-  variant,
-  size,
-  rounded,
-  asChild = false,
-  isLoading = false,
-  ref,
-  ...props
-}: ButtonProps) => {
-  const Comp = asChild ? Slot : 'button';
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props}
-    >
-      {isLoading ? (
-        <Loader2
-          className={cn('h-4 w-4 animate-spin', size !== 'icon' && 'mr-2')}
-        />
-      ) : null}
-      {isLoading && size === 'icon' ? null : props.children}
-    </Comp>
-  );
-};
-
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };

package/primitives/calendar.tsx

@@ -1,72 +0,0 @@
-"use client"
-import React from "react"
-
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
-import { DayPicker } from "react-day-picker"
-
-import { cn } from "../util"
-import { buttonVariants } from "./button"
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
-
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-1 rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-above-content [&:has([aria-selected])]:bg-level-1 [&:has([aria-selected].day-outside)]:bg-level-1/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md"
-        ),
-        day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-fg hover:bg-primary hover:text-primary-fg focus:bg-primary focus:text-primary-fg",
-        day_today: "bg-accent text-primary-fg",
-        day_outside:
-          "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-1 aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-primary-fg",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  )
-}
-Calendar.displayName = "Calendar"
-
-export default Calendar

package/primitives/card.tsx

@@ -1,97 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '../src/utils';
-
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-const Card = ({ className, ref, ...props }: CardProps) => (
-  <div
-    className={cn(
-      'bg-card text-card-foreground rounded-lg border shadow-xs',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-);
-Card.displayName = 'Card';
-
-type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-const CardHeader = ({ className, ref, ...props }: CardHeaderProps) => (
-  <div
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    ref={ref}
-    {...props}
-  />
-);
-
-CardHeader.displayName = 'CardHeader';
-
-type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
-  ref?: React.RefObject<HTMLHeadingElement>;
-};
-
-const CardTitle = ({ className, ref, ...props }: CardTitleProps) => (
-  <h3
-    className={cn(
-      'text-2xl leading-none font-semibold tracking-tight',
-      className,
-    )}
-    ref={ref}
-    {...props}
-  />
-);
-CardTitle.displayName = 'CardTitle';
-
-type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
-  ref?: React.RefObject<HTMLParagraphElement>;
-};
-
-const CardDescription = ({
-  className,
-  ref,
-  ...props
-}: CardDescriptionProps) => (
-  <p
-    className={cn('text-text-secondary text-sm', className)}
-    ref={ref}
-    {...props}
-  />
-);
-CardDescription.displayName = 'CardDescription';
-
-type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-const CardContent = ({ className, ref, ...props }: CardContentProps) => (
-  <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
-);
-CardContent.displayName = 'CardContent';
-
-type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
-  ref?: React.RefObject<HTMLDivElement>;
-};
-
-const CardFooter = ({ className, ref, ...props }: CardFooterProps) => (
-  <div
-    className={cn('flex items-center p-6 pt-0', className)}
-    ref={ref}
-    {...props}
-  />
-);
-CardFooter.displayName = 'CardFooter';
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};

package/primitives/carousel.tsx

@@ -1,237 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import useEmblaCarousel from 'embla-carousel-react'
-import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel'
-
-import { ArrowLeft, ArrowRight } from 'lucide-react'
-
-import { cn } from '../util'
-import Button from './button'
-
-type CarouselApi = EmblaCarouselType  
-type CarouselOptions = EmblaOptionsType
-type CarouselPlugin = EmblaPluginType
-
-type CarouselProps = {
-  options?: CarouselOptions
-  plugins?: CarouselPlugin[] 
-  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void
-  onCarouselSelect?: (api: CarouselApi) => void 
-}
-
-type UseCarouselType = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<UseCarouselType | null>(null)
-
-const useCarousel = (): UseCarouselType => {
-  const service = React.useContext(CarouselContext)
-  if (!service) { throw new Error('useCarousel must be used within a <Carousel />') }
-  return service
-}
-
-// https://github.com/emilkowalski/vaul/pull/250
-// See data-vaul-no-drag throughout
-
-const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  ({
-    orientation = 'horizontal',
-    options,
-    setApi,
-    plugins,
-    className,
-    children,
-    onCarouselSelect,
-    ...props
-  }, ref ) => {
-
-    const [carouselRef, api] = useEmblaCarousel({...options, axis: orientation === 'horizontal' ? 'x' : 'y'}, plugins)
-
-    const [canScrollPrev, setCanScrollPrev] = React.useState<boolean>(false)
-    const [canScrollNext, setCanScrollNext] = React.useState<boolean>(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) { return } // would this ever happen??
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-      if (onCarouselSelect) { onCarouselSelect(api)}
-    }, [])
-
-    const scrollPrev = React.useCallback(() => { api?.scrollPrev()}, [api])
-    const scrollNext = React.useCallback(() => { api?.scrollNext()}, [api])
-
-    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault()
-        scrollPrev()
-      }
-      else if (event.key === 'ArrowRight') {
-        event.preventDefault()
-        scrollNext()
-      }
-    }, [scrollPrev, scrollNext])
-
-    React.useEffect(() => {
-      if (!api || !setApi) { return }
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) { return }
-      onSelect(api)
-      api.on('reInit', onSelect)
-      api.on('select', onSelect)
-      return () => { api?.off('select', onSelect) }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api,
-          options,
-          orientation: orientation || (options?.axis === 'y' ? 'vertical' : 'horizontal'),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn('relative', className)}
-          role='region'
-          aria-roledescription='carousel'
-          data-vaul-no-drag 
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = 'Carousel'
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className='overflow-hidden' data-vaul-no-drag >
-      <div
-        ref={ref}
-        className={cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = 'CarouselContent'
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role='group'
-      aria-roledescription='slide'
-      data-vaul-no-drag 
-      className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = 'CarouselItem'
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute  h-8 w-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className='h-4 w-4' />
-      <span className='sr-only'>Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = 'CarouselPrevious'
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = 'ghost', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute h-8 w-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className='h-4 w-4' />
-      <span className='sr-only'>Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = 'CarouselNext'
-
-export {
-  type CarouselApi,
-  type CarouselOptions,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}