@hanzo/ui 5.0.0 → 5.0.1

package/primitives/breadcrumb.tsx

@@ -0,0 +1,130 @@
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import 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

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

@@ -0,0 +1,72 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import React from 'react';
+
+import { cn } from '../src/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        // Keep the additional Hanzo variants for backward compatibility
+        primary:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        linkFG: 'text-primary underline-offset-4 hover:underline',
+        linkMuted: 'text-muted-foreground underline-offset-4 hover:underline hover:text-foreground',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isLoading?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, isLoading = false, children, ...props }, ref) => {
+    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 : children}
+      </Comp>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+export default Button; // Keep default export for backward compatibility

package/primitives/calendar.tsx

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

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

@@ -0,0 +1,238 @@
+'use client'
+
+import React from 'react';
+import useEmblaCarousel from 'embla-carousel-react'
+// @ts-ignore
+const { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } = {}
+
+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,
+}