0.0.307 - fix: function everything

risc0 · Feb 28, 2025 · a01b26a · a01b26a
1 parent 09a0001
commit a01b26a
Show file tree

Hide file tree

Showing 33 changed files with 989 additions and 1,260 deletions.
diff --git a/README.md b/README.md
@@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui
 
 | Statements                  | Branches                | Functions                 | Lines             |
 | --------------------------- | ----------------------- | ------------------------- | ----------------- |
-| ![Statements](https://img.shields.io/badge/statements-41.95%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-77.94%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-72.5%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-41.95%25-red.svg?style=flat) |
+| ![Statements](https://img.shields.io/badge/statements-42.55%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-86.36%25-yellow.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-85.88%25-yellow.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-42.55%25-red.svg?style=flat) |
diff --git a/alert.tsx b/alert.tsx
@@ -1,5 +1,5 @@
 import { type VariantProps, cva } from "class-variance-authority";
-import { type HTMLAttributes, forwardRef } from "react";
+import type { ComponentProps } from "react";
 import { cn } from "./cn";
 
 const alertVariants = cva(
@@ -17,24 +17,16 @@ const alertVariants = cva(
   },
 );
 
-const Alert = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
-  ({ className, variant, ...rest }, ref) => (
-    <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...rest} />
-  ),
-);
-
-const AlertTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...rest }, ref) => <h3 ref={ref} className={cn("mb-1 font-bold leading-none", className)} {...rest} />,
-);
+function Alert({ className, variant, ...rest }: ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return <div role="alert" className={cn(alertVariants({ variant }), className)} {...rest} />;
+}
 
-const AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...rest }, ref) => (
-    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...rest} />
-  ),
-);
+function AlertTitle({ className, ...rest }: ComponentProps<"div">) {
+  return <div className={cn("mb-1 font-bold leading-none", className)} {...rest} />;
+}
 
-Alert.displayName = "Alert";
-AlertTitle.displayName = "AlertTitle";
-AlertDescription.displayName = "AlertDescription";
+function AlertDescription({ className, ...rest }: ComponentProps<"div">) {
+  return <div className={cn("text-sm [&_p]:leading-relaxed", className)} {...rest} />;
+}
 
-export { Alert, AlertTitle, AlertDescription };
+export { alertVariants, Alert, AlertTitle, AlertDescription };
diff --git a/avatar.tsx b/avatar.tsx
@@ -1,42 +1,31 @@
 "use client";
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
+import type { ComponentProps } from "react";
 import { cn } from "./cn";
 
-const Avatar = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...rest }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    data-testid="avatar"
-    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
-    {...rest}
-  />
-));
+function Avatar({ className, ...rest }: ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-testid="avatar"
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...rest}
+    />
+  );
+}
 
-const AvatarImage = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Image>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...rest }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...rest} />
-));
+function AvatarImage({ className, ...rest }: ComponentProps<typeof AvatarPrimitive.Image>) {
+  return <AvatarPrimitive.Image className={cn("aspect-square h-full w-full", className)} {...rest} />;
+}
 
-const AvatarFallback = forwardRef<
-  ElementRef<typeof AvatarPrimitive.Fallback>,
-  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...rest }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    data-testid="avatar-fallback"
-    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
-    {...rest}
-  />
-));
-
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+function AvatarFallback({ className, ...rest }: ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-testid="avatar-fallback"
+      className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+      {...rest}
+    />
+  );
+}
 
 export { Avatar, AvatarImage, AvatarFallback };
diff --git a/badge.tsx b/badge.tsx
@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "react";
 import type { Simplify } from "type-fest";
 import { cn } from "./cn";
 
-export const badgeVariants = cva(
+const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 font-bold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
@@ -27,6 +27,8 @@ export type BadgeProps = Simplify<
     }
 >;
 
-export function Badge({ className, variant, ...rest }: BadgeProps) {
+function Badge({ className, variant, ...rest }: BadgeProps) {
   return <div data-testid="badge" {...rest} className={cn(badgeVariants({ variant }), className)} />;
 }
+
+export { Badge, badgeVariants };
diff --git a/breadcrumb.tsx b/breadcrumb.tsx
@@ -1,84 +1,67 @@
 import { Slot } from "@radix-ui/react-slot";
 import { ChevronRightIcon, EllipsisIcon } from "lucide-react";
-import { type ComponentProps, type ComponentPropsWithoutRef, type ReactNode, forwardRef } from "react";
+import type { ComponentProps } from "react";
 import { cn } from "./cn";
 
-const Breadcrumb = forwardRef<
-  HTMLElement,
-  ComponentPropsWithoutRef<"nav"> & {
-    separator?: ReactNode;
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+function Breadcrumb({ ...rest }: ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" {...rest} />;
+}
 
-const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithoutRef<"ol">>(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
-      className,
-    )}
-    {...props}
-  />
-));
+function BreadcrumbList({ className, ...rest }: ComponentProps<"ol">) {
+  return (
+    <ol
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-muted-foreground text-sm sm:gap-2.5",
+        className,
+      )}
+      {...rest}
+    />
+  );
+}
 
-const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<"li">>(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
-));
+function BreadcrumbItem({ className, ...rest }: ComponentProps<"li">) {
+  return <li className={cn("inline-flex items-center gap-1.5", className)} {...rest} />;
+}
 
-const BreadcrumbLink = forwardRef<
-  HTMLAnchorElement,
-  ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
->(({ asChild, className, ...props }, ref) => {
+function BreadcrumbLink({ asChild, className, ...rest }: ComponentProps<"a"> & { asChild?: boolean }) {
   const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
       data-testid="breadcrumb-link"
-      ref={ref}
       className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
+      {...rest}
     />
   );
-});
+}
 
-const BreadcrumbPage = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<"span">>(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    aria-disabled="true"
-    role="link"
-    aria-current="page"
-    className={cn("text-foreground", className)}
-    {...props}
-  />
-));
-
-const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
-    {children ?? <ChevronRightIcon />}
-  </li>
-);
+function BreadcrumbPage({ className, ...rest }: ComponentProps<"span">) {
+  return (
+    <span aria-disabled="true" role="link" aria-current="page" className={cn("text-foreground", className)} {...rest} />
+  );
+}
 
-const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <EllipsisIcon className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-);
+function BreadcrumbSeparator({ children, className, ...rest }: ComponentProps<"li">) {
+  return (
+    <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...rest}>
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
 
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-BreadcrumbPage.displayName = "BreadcrumbPage";
-BreadcrumbLink.displayName = "BreadcrumbLink";
-Breadcrumb.displayName = "Breadcrumb";
-BreadcrumbList.displayName = "BreadcrumbList";
-BreadcrumbItem.displayName = "BreadcrumbItem";
+function BreadcrumbEllipsis({ className, ...rest }: ComponentProps<"span">) {
+  return (
+    <span
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex h-9 w-9 items-center justify-center", className)}
+      {...rest}
+    >
+      <EllipsisIcon className="h-4 w-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
 
 export {
   Breadcrumb,

diff --git a/button.tsx b/button.tsx
@@ -1,11 +1,10 @@
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import { Loader2Icon } from "lucide-react";
-import { type ButtonHTMLAttributes, type ReactElement, cloneElement, forwardRef } from "react";
-import type { Simplify } from "type-fest";
+import { type ComponentProps, type ReactElement, cloneElement } from "react";
 import { cn } from "./cn";
 
-export const buttonVariants = cva(
+const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md font-bold text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
@@ -31,7 +30,7 @@ export const buttonVariants = cva(
   },
 );
 
-export const iconVariants = cva(undefined, {
+const iconVariants = cva(undefined, {
   variants: {
     size: {
       default: "size-4 max-w-4",
@@ -46,44 +45,46 @@ export const iconVariants = cva(undefined, {
   },
 });
 
-export type ButtonProps = Simplify<
-  ButtonHTMLAttributes<HTMLButtonElement> &
-    VariantProps<typeof buttonVariants> & {
-      asChild?: boolean;
-      isLoading?: boolean;
-      startIcon?: ReactElement;
-      endIcon?: ReactElement;
-    }
->;
+function Button({
+  className,
+  startIcon,
+  isLoading = false,
+  variant,
+  endIcon,
+  size,
+  children,
+  asChild = false,
+  ...rest
+}: ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    isLoading?: boolean;
+    startIcon?: ReactElement<any>;
+    endIcon?: ReactElement<any>;
+  }) {
+  const Component = asChild ? Slot : "button";
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, startIcon, isLoading = false, variant, endIcon, size, children, asChild = false, ...rest }, ref) => {
-    const Component = asChild ? Slot : "button";
+  return (
+    <Component className={cn(buttonVariants({ variant, size, className }))} {...rest}>
+      <div
+        data-testid="loader-icon"
+        aria-hidden={!isLoading}
+        className={cn(!startIcon && "transition-all", "mr-2", iconVariants({ size }), !isLoading && "mr-0 max-w-0")}
+      >
+        {isLoading && <Loader2Icon className={cn(iconVariants({ size }), "animate-spin")} />}
+      </div>
+      {!isLoading &&
+        startIcon &&
+        cloneElement(startIcon as ReactElement<any>, {
+          className: cn("mr-2", iconVariants({ size }), startIcon.props.className),
+        })}
+      {children}
+      {endIcon &&
+        cloneElement(endIcon as ReactElement<any>, {
+          className: cn("ml-2", iconVariants({ size }), endIcon.props.className),
+        })}
+    </Component>
+  );
+}
 
-    return (
-      <Component className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...rest}>
-        <div
-          data-testid="loader-icon"
-          aria-hidden={!isLoading}
-          className={cn(!startIcon && "transition-all", "mr-2", iconVariants({ size }), !isLoading && "mr-0 max-w-0")}
-        >
-          {isLoading && <Loader2Icon className={cn(iconVariants({ size }), "animate-spin")} />}
-        </div>
-        {!isLoading &&
-          startIcon &&
-          cloneElement(startIcon as ReactElement, {
-            className: cn("mr-2", iconVariants({ size }), startIcon.props.className),
-          })}
-        {children}
-        {endIcon &&
-          cloneElement(endIcon as ReactElement, {
-            className: cn("ml-2", iconVariants({ size }), endIcon.props.className),
-          })}
-      </Component>
-    );
-  },
-);
-
-Button.displayName = "Button";
-
-export { Button };
+export { Button, buttonVariants, iconVariants };