chore: change all default exports to named

alert.tsx

@@ -1,7 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 import { type HTMLAttributes, forwardRef } from "react";
 import { tv } from "tailwind-variants";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const alertVariants = tv({
   base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground [&>svg~*]:pl-7",

avatar.tsx

@@ -2,7 +2,7 @@
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Avatar = forwardRef<
   ElementRef<typeof AvatarPrimitive.Root>,

badge.tsx

@@ -1,6 +1,6 @@
 import { type VariantProps, cva } from "class-variance-authority";
 import type { HTMLAttributes } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -19,14 +19,12 @@ const badgeVariants = cva(
   },
 );
 
-interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
   // any other prop goes here
 }
 
 function Badge({ className, variant, ...rest }: BadgeProps) {
   return <div className={cn(badgeVariants({ variant }), className)} {...rest} />;
 }
 
-export { badgeVariants };
-
-export default Badge;
+export { Badge, badgeVariants };

button.tsx

@@ -2,7 +2,7 @@ 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 cn from "./cn";
+import { cn } from "./cn";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center 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",
@@ -45,7 +45,7 @@ const iconVariants = cva(undefined, {
   },
 });
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean;
   isLoading?: boolean;
   startIcon?: ReactElement;
@@ -83,6 +83,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
 Button.displayName = "Button";
 
-export { buttonVariants };
-
-export default Button;
+export { Button, buttonVariants };

card.tsx

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...rest }, ref) => (
   <div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground", className)} {...rest} />

checkbox.tsx

@@ -3,7 +3,7 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Checkbox = forwardRef<
   ElementRef<typeof CheckboxPrimitive.Root>,
@@ -25,4 +25,4 @@ const Checkbox = forwardRef<
 
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export default Checkbox;
+export { Checkbox };

cn.ts

@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export default function cn(...inputs: ClassValue[]) {
+export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

command.tsx

@@ -4,7 +4,7 @@ import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { SearchIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 import { Dialog, DialogContent } from "./dialog";
 
 const Command = forwardRef<ElementRef<typeof CommandPrimitive>, ComponentPropsWithoutRef<typeof CommandPrimitive>>(
@@ -19,9 +19,8 @@ const Command = forwardRef<ElementRef<typeof CommandPrimitive>, ComponentPropsWi
     />
   ),
 );
-Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
+export interface CommandDialogProps extends DialogProps {}
 
 const CommandDialog = ({ children, ...rest }: CommandDialogProps) => {
   return (
@@ -65,15 +64,11 @@ const CommandList = forwardRef<
   />
 ));
 
-CommandList.displayName = CommandPrimitive.List.displayName;
-
 const CommandEmpty = forwardRef<
   ElementRef<typeof CommandPrimitive.Empty>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-
 const CommandGroup = forwardRef<
   ElementRef<typeof CommandPrimitive.Group>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
@@ -88,15 +83,12 @@ const CommandGroup = forwardRef<
   />
 ));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
-
 const CommandSeparator = forwardRef<
   ElementRef<typeof CommandPrimitive.Separator>,
   ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...rest }, ref) => (
   <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...rest} />
 ));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = forwardRef<
   ElementRef<typeof CommandPrimitive.Item>,
@@ -112,12 +104,17 @@ const CommandItem = forwardRef<
   />
 ));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName;
-
 const CommandShortcut = ({ className, ...rest }: HTMLAttributes<HTMLSpanElement>) => {
   return <span className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)} {...rest} />;
 };
+
 CommandShortcut.displayName = "CommandShortcut";
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+Command.displayName = CommandPrimitive.displayName;
+CommandList.displayName = CommandPrimitive.List.displayName;
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 export {
   Command,

dialog.tsx

@@ -3,7 +3,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const DialogOverlay = forwardRef<
   ElementRef<typeof DialogPrimitive.Overlay>,

dropdown-menu.tsx

@@ -3,7 +3,7 @@
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { CheckIcon, ChevronRightIcon, DotIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const DropdownMenuSubTrigger = forwardRef<
   ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,

form.tsx

@@ -17,8 +17,8 @@ import {
   FormProvider,
   useFormContext,
 } from "react-hook-form";
-import cn from "./cn";
-import Label from "./label";
+import { cn } from "./cn";
+import { Label } from "./label";
 
 const Form = FormProvider;
 

hooks/useEventListener.ts

@@ -45,4 +45,4 @@ const useEventListener = <T extends HTMLElement = HTMLDivElement>(
   }, [eventName, element, handler]);
 };
 
-export default useEventListener;
+export { useEventListener };

hooks/useLocalStorage.ts

@@ -1,7 +1,7 @@
 import { isEqual, isFunction, isNil } from "lodash-es";
 import { type Dispatch, type SetStateAction, useEffect, useRef, useState } from "react";
-import parseJSON from "../utils/parseJSON";
-import useEventListener from "./useEventListener";
+import { parseJSON } from "../utils/parseJSON";
+import { useEventListener } from "./useEventListener";
 
 type SetValue<T> = Dispatch<SetStateAction<T>>;
 
@@ -106,4 +106,4 @@ const useLocalStorage = <T>(key: string, initialValue: T): [T, SetValue<T>] => {
   return [storedValue, setValue];
 };
 
-export default useLocalStorage;
+export { useLocalStorage };

input.tsx

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   // any other prop goes here
@@ -19,4 +19,4 @@ const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...re
 
 Input.displayName = "Input";
 
-export default Input;
+export { Input };

label.tsx

@@ -4,7 +4,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import type { VariantProps } from "class-variance-authority";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
 import { tv } from "tailwind-variants";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const labelVariants = tv({
   base: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
@@ -19,4 +19,4 @@ const Label = forwardRef<
 
 Label.displayName = LabelPrimitive.Root.displayName;
 
-export default Label;
+export { Label };

link.tsx

@@ -4,7 +4,7 @@ import { addBasePath } from "next/dist/client/add-base-path";
 import NextLink from "next/link";
 import NProgress from "nprogress";
 import { type ComponentProps, type MouseEvent, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 function onStart() {
   NProgress.start();
@@ -81,4 +81,4 @@ const Link = forwardRef<HTMLAnchorElement, ComponentProps<"a">>(function Link(
   );
 });
 
-export default Link;
+export { Link };

loader.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 
-export default function Loader() {
+export function Loader() {
   return (
     <div className="mx-auto flex animate-fade-in-up flex-col items-center justify-center gap-3">
       <Image unoptimized height={120} width={128} src="/loading.gif" alt="Loading" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "sideEffects": false,
   "type": "module",
   "scripts": {

popover.tsx

@@ -2,7 +2,7 @@
 
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;

progress.tsx

@@ -2,7 +2,7 @@
 
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Progress = forwardRef<
   ElementRef<typeof ProgressPrimitive.Root>,
@@ -22,4 +22,4 @@ const Progress = forwardRef<
 
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export default Progress;
+export { Progress };

radio-group.tsx

@@ -2,7 +2,7 @@
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const RadioGroup = forwardRef<
   ElementRef<typeof RadioGroupPrimitive.Root>,

required.tsx

@@ -1,3 +1,3 @@
-export default function Required() {
+export function Required() {
   return <span className="text-destructive">*</span>;
 }

select.tsx

@@ -3,7 +3,7 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const SelectTrigger = forwardRef<
   ElementRef<typeof SelectPrimitive.Trigger>,

separator.tsx

@@ -2,7 +2,7 @@
 
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Separator = forwardRef<
   ElementRef<typeof SeparatorPrimitive.Root>,
@@ -19,4 +19,4 @@ const Separator = forwardRef<
 
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export default Separator;
+export { Separator };

sheet.tsx

@@ -4,7 +4,7 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps, cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { type ComponentPropsWithoutRef, type ElementRef, type HTMLAttributes, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Sheet = SheetPrimitive.Root;
 const SheetTrigger = SheetPrimitive.Trigger;

skeleton.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
-export default function Skeleton({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+export function Skeleton({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
   return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...rest} />;
 }

slider.tsx

@@ -2,7 +2,7 @@
 
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from "react";
-import cn from "./cn";
+import { cn } from "./cn";
 
 const Slider = forwardRef<
   ElementRef<typeof SliderPrimitive.Root>,
@@ -22,4 +22,4 @@ const Slider = forwardRef<
 
 Slider.displayName = SliderPrimitive.Root.displayName;
 
-export default Slider;
+export { Slider };

sonner.tsx

@@ -4,16 +4,14 @@ import { useTheme } from "next-themes";
 import type { ComponentProps } from "react";
 // @ts-ignore -- not sure why this is not working
 import { Toaster as Sonner } from "sonner";
-import cn from "./cn";
+import { cn } from "./cn";
 
-type ToasterProps = ComponentProps<typeof Sonner>;
-
-export default function Toaster({ ...props }: ToasterProps) {
+export function Toaster({ ...props }) {
   const { theme = "system" } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme}
       className="toaster group border-"
       toastOptions={{
         classNames: {