remove forward ref

This commit is contained in:
miloschwartz 2025-04-12 12:40:52 -04:00
parent 521bbbf1d6
commit f14379a1c8
No known key found for this signature in database
25 changed files with 2067 additions and 1779 deletions

View file

@ -105,8 +105,14 @@ export interface TagInputProps
generateTagId?: () => string;
}
const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
(props, ref) => {
const TagInput = (
{
ref,
...props
}: TagInputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const {
id,
placeholder,
@ -449,7 +455,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
: displayedTags;
return (
<div
(<div
className={`w-full flex ${!inlineTags && tags.length > 0 ? "gap-3" : ""} ${
inputFieldPosition === "bottom"
? "flex-col"
@ -606,7 +612,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
// styleClasses?.input,
// )}
// />
<Input
(<Input
ref={inputRef}
id={id}
type="text"
@ -640,7 +646,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
(maxTags !== undefined &&
tags.length >= maxTags)
}
/>
/>)
) : (
<div
className={cn(
@ -918,7 +924,6 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
)}
</div>
)}
{showCount && maxTags && (
<div className="flex">
<span className="text-muted-foreground text-sm mt-1 ml-auto">
@ -935,10 +940,9 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
Clear All
</Button>
)}
</div>
</div>)
);
}
);
};
TagInput.displayName = "TagInput";

View file

@ -22,44 +22,52 @@ const alertVariants = cva(
},
);
const Alert = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
const Alert = (
{
ref,
className,
variant,
...props
}
) => (<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
));
/>);
Alert.displayName = "Alert";
const AlertTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
const AlertTitle = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<h5
ref={ref}
className={cn(
"mb-1 font-medium leading-none tracking-tight",
className,
)}
{...props}
/>
));
/>);
AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
const AlertDescription = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
));
/>);
AlertDescription.displayName = "AlertDescription";
export { Alert, AlertTitle, AlertDescription };

View file

@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
import { cn } from "@app/lib/cn"
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Root
const Avatar = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
}
) => (<AvatarPrimitive.Root
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
/>)
Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Image>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Image
const AvatarImage = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
}
) => (<AvatarPrimitive.Image
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
/>)
AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
<AvatarPrimitive.Fallback
const AvatarFallback = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
}
) => (<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
/>)
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback }

View file

@ -4,47 +4,55 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@app/lib/cn"
const Breadcrumb = React.forwardRef<
HTMLElement,
React.ComponentPropsWithoutRef<"nav"> & {
separator?: React.ReactNode
const Breadcrumb = (
{
ref,
...props
}
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
) => <nav ref={ref} aria-label="breadcrumb" {...props} />
Breadcrumb.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef<
HTMLOListElement,
React.ComponentPropsWithoutRef<"ol">
>(({ className, ...props }, ref) => (
<ol
const BreadcrumbList = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<"ol"> & {
ref: React.RefObject<HTMLOListElement>;
}
) => (<ol
ref={ref}
className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className
)}
{...props}
/>
))
/>)
BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef<
HTMLLIElement,
React.ComponentPropsWithoutRef<"li">
>(({ className, ...props }, ref) => (
<li
const BreadcrumbItem = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<"li"> & {
ref: React.RefObject<HTMLLIElement>;
}
) => (<li
ref={ref}
className={cn("inline-flex items-center gap-1.5", className)}
{...props}
/>
))
/>)
BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef<
HTMLAnchorElement,
React.ComponentPropsWithoutRef<"a"> & {
asChild?: boolean
const BreadcrumbLink = (
{
ref,
asChild,
className,
...props
}
>(({ asChild, className, ...props }, ref) => {
) => {
const Comp = asChild ? Slot : "a"
return (
@ -54,22 +62,25 @@ const BreadcrumbLink = React.forwardRef<
{...props}
/>
)
})
}
BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef<
HTMLSpanElement,
React.ComponentPropsWithoutRef<"span">
>(({ className, ...props }, ref) => (
<span
const BreadcrumbPage = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<"span"> & {
ref: React.RefObject<HTMLSpanElement>;
}
) => (<span
ref={ref}
role="link"
aria-disabled="true"
aria-current="page"
className={cn("font-normal text-foreground", className)}
{...props}
/>
))
/>)
BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({

View file

@ -51,18 +51,19 @@ export interface ButtonProps
loading?: boolean; // Add loading prop
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
const Button = (
{
ref,
className,
variant,
size,
asChild = false,
loading = false,
...props
},
ref
) => {
}: ButtonProps & {
ref: React.RefObject<HTMLButtonElement>;
}
) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
@ -75,8 +76,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{props.children}
</Comp>
);
}
);
};
Button.displayName = "Button";
export { Button, buttonVariants };

View file

@ -2,78 +2,96 @@ import * as React from "react";
import { cn } from "@app/lib/cn";
const Card = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
const Card = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground",
className,
)}
{...props}
/>
));
/>);
Card.displayName = "Card";
const CardHeader = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
const CardHeader = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
));
/>);
CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
const CardTitle = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<h3
ref={ref}
className={cn(
"text-2xl font-semibold leading-none tracking-tight",
className,
)}
{...props}
/>
));
/>);
CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
const CardDescription = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<p
ref={ref}
className={cn("text-sm text-muted-foreground pt-1", className)}
{...props}
/>
));
/>);
CardDescription.displayName = "CardDescription";
const CardContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
));
const CardContent = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />);
CardContent.displayName = "CardContent";
const CardFooter = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
const CardFooter = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
));
/>);
CardFooter.displayName = "CardFooter";
export {

View file

@ -33,20 +33,24 @@ interface CheckboxProps
extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
VariantProps<typeof checkboxVariants> {}
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
CheckboxProps
>(({ className, variant, ...props }, ref) => (
<CheckboxPrimitive.Root
const Checkbox = (
{
ref,
className,
variant,
...props
}: CheckboxProps & {
ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
}
) => (<CheckboxPrimitive.Root
ref={ref}
className={cn(checkboxVariants({ variant }), className)}
{...props}
>
>
<CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
</CheckboxPrimitive.Root>);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
interface CheckboxWithLabelProps
@ -54,10 +58,17 @@ interface CheckboxWithLabelProps
label: string;
}
const CheckboxWithLabel = React.forwardRef<
React.ElementRef<typeof Checkbox>,
CheckboxWithLabelProps
>(({ className, label, id, ...props }, ref) => {
const CheckboxWithLabel = (
{
ref,
className,
label,
id,
...props
}: CheckboxWithLabelProps & {
ref: React.RefObject<React.ElementRef<typeof Checkbox>>;
}
) => {
return (
<div className={cn("flex items-center space-x-2", className)}>
<Checkbox id={id} ref={ref} {...props} />
@ -69,7 +80,7 @@ const CheckboxWithLabel = React.forwardRef<
</label>
</div>
);
});
};
CheckboxWithLabel.displayName = "CheckboxWithLabel";
export { Checkbox, CheckboxWithLabel };

View file

@ -8,19 +8,22 @@ import { Search } from "lucide-react"
import { cn } from "@app/lib/cn"
import { Dialog, DialogContent } from "@/components/ui/dialog"
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
const Command = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
}
) => (<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
)}
{...props}
/>
))
/>)
Command.displayName = CommandPrimitive.displayName
interface CommandDialogProps extends DialogProps {}
@ -37,11 +40,15 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
)
}
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
const CommandInput = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
}
) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
@ -51,78 +58,91 @@ const CommandInput = React.forwardRef<
)}
{...props}
/>
</div>
))
</div>)
CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
const CommandList = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
}
) => (<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props}
/>
))
/>)
CommandList.displayName = CommandPrimitive.List.displayName
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
<CommandPrimitive.Empty
const CommandEmpty = (
{
ref,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
}
) => (<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
{...props}
/>
))
/>)
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
const CommandGroup = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
}
) => (<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
))
/>)
CommandGroup.displayName = CommandPrimitive.Group.displayName
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
const CommandSeparator = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
}
) => (<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
))
/>)
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
const CommandItem = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
}
) => (<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none rounded-md items-center px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
className,
)}
{...props}
/>
))
/>)
CommandItem.displayName = CommandPrimitive.Item.displayName

View file

@ -14,26 +14,34 @@ const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
const DialogOverlay = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
}
) => (<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
));
/>);
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
const DialogContent = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
}
) => (<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
@ -49,8 +57,7 @@ const DialogContent = React.forwardRef<
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
</DialogPortal>);
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
@ -81,31 +88,37 @@ const DialogFooter = ({
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
const DialogTitle = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
}
) => (<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
/>);
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
const DialogDescription = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
}
) => (<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
/>);
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {

View file

@ -22,23 +22,31 @@ const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
const DrawerOverlay = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
}
) => (<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
{...props}
/>
));
/>);
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DrawerPortal>
const DrawerContent = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
}
) => (<DrawerPortal>
<DrawerOverlay />
<DrawerPrimitive.Content
ref={ref}
@ -51,8 +59,7 @@ const DrawerContent = React.forwardRef<
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
));
</DrawerPortal>);
DrawerContent.displayName = "DrawerContent";
const DrawerHeader = ({
@ -77,31 +84,37 @@ const DrawerFooter = ({
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Title
const DrawerTitle = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
}
) => (<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
));
/>);
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
const DrawerDescription = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
}
) => (<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
));
/>);
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {

View file

@ -18,13 +18,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
const DropdownMenuSubTrigger = (
{
ref,
className,
inset,
children,
...props
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
) => (<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
@ -32,35 +34,42 @@ const DropdownMenuSubTrigger = React.forwardRef<
className
)}
{...props}
>
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
</DropdownMenuPrimitive.SubTrigger>)
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
const DropdownMenuSubContent = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
}
) => (<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
))
/>)
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
const DropdownMenuContent = (
{
ref,
className,
sideOffset = 4,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
}
) => (<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
@ -70,17 +79,17 @@ const DropdownMenuContent = React.forwardRef<
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
</DropdownMenuPrimitive.Portal>)
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
const DropdownMenuItem = (
{
ref,
className,
inset,
...props
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
) => (<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
@ -88,15 +97,20 @@ const DropdownMenuItem = React.forwardRef<
className
)}
{...props}
/>
))
/>)
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
const DropdownMenuCheckboxItem = (
{
ref,
className,
children,
checked,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
}
) => (<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
@ -104,47 +118,51 @@ const DropdownMenuCheckboxItem = React.forwardRef<
)}
checked={checked}
{...props}
>
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
</DropdownMenuPrimitive.CheckboxItem>)
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
const DropdownMenuRadioItem = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
}
) => (<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...props}
>
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
</DropdownMenuPrimitive.RadioItem>)
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
const DropdownMenuLabel = (
{
ref,
className,
inset,
...props
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
) => (<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
@ -152,20 +170,22 @@ const DropdownMenuLabel = React.forwardRef<
className
)}
{...props}
/>
))
/>)
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
const DropdownMenuSeparator = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
}
) => (<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
/>)
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({

View file

@ -72,10 +72,15 @@ const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const FormItem = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => {
const id = React.useId()
return (
@ -83,13 +88,18 @@ const FormItem = React.forwardRef<
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</FormItemContext.Provider>
)
})
}
FormItem.displayName = "FormItem"
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const FormLabel = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root>>;
}
) => {
const { error, formItemId } = useFormField()
return (
@ -100,13 +110,17 @@ const FormLabel = React.forwardRef<
{...props}
/>
)
})
}
FormLabel.displayName = "FormLabel"
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const FormControl = (
{
ref,
...props
}: React.ComponentPropsWithoutRef<typeof Slot> & {
ref: React.RefObject<React.ElementRef<typeof Slot>>;
}
) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
return (
@ -122,13 +136,18 @@ const FormControl = React.forwardRef<
{...props}
/>
)
})
}
FormControl.displayName = "FormControl"
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const FormDescription = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => {
const { formDescriptionId } = useFormField()
return (
@ -139,13 +158,19 @@ const FormDescription = React.forwardRef<
{...props}
/>
)
})
}
FormDescription.displayName = "FormDescription"
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const FormMessage = (
{
ref,
className,
children,
...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
@ -163,7 +188,7 @@ const FormMessage = React.forwardRef<
{body}
</p>
)
})
}
FormMessage.displayName = "FormMessage"
export {

View file

@ -6,11 +6,16 @@ import { Dot } from "lucide-react"
import { cn } from "@app/lib/cn"
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
<OTPInput
const InputOTP = (
{
ref,
className,
containerClassName,
...props
}: React.ComponentPropsWithoutRef<typeof OTPInput> & {
ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
}
) => (<OTPInput
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-disabled:opacity-50",
@ -18,22 +23,28 @@ const InputOTP = React.forwardRef<
)}
className={cn("disabled:cursor-not-allowed", 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} />
))
const InputOTPGroup = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<"div"> & {
ref: React.RefObject<React.ElementRef<"div">>;
}
) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />)
InputOTPGroup.displayName = "InputOTPGroup"
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
const InputOTPSlot = (
{
ref,
index,
className,
...props
}
) => {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
@ -55,17 +66,19 @@ const InputOTPSlot = React.forwardRef<
)}
</div>
)
})
}
InputOTPSlot.displayName = "InputOTPSlot"
const InputOTPSeparator = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ ...props }, ref) => (
<div ref={ref} role="separator" {...props}>
const InputOTPSeparator = (
{
ref,
...props
}: React.ComponentPropsWithoutRef<"div"> & {
ref: React.RefObject<React.ElementRef<"div">>;
}
) => (<div ref={ref} role="separator" {...props}>
<Dot />
</div>
))
</div>)
InputOTPSeparator.displayName = "InputOTPSeparator"
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

View file

@ -5,8 +5,16 @@ import { EyeOff, Eye } from "lucide-react";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
const Input = (
{
ref,
className,
type,
...props
}: InputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
@ -46,8 +54,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
{...props}
/>
);
}
);
};
Input.displayName = "Input";
export { Input };

View file

@ -10,17 +10,17 @@ const labelVariants = cva(
"text-sm 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
const Label = (
{
ref,
className,
...props
}
) => (<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
/>)
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

View file

@ -7,22 +7,31 @@ import { cn } from "@app/lib/cn"
const Popover = PopoverPrimitive.Root
const PopoverTrigger = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<PopoverPrimitive.Trigger
const PopoverTrigger = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Trigger>>;
}
) => (<PopoverPrimitive.Trigger
ref={ref}
className={cn(className, "rounded-md")}
{...props}
/>
))
/>)
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
const PopoverContent = (
{
ref,
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
}
) => (<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
@ -33,8 +42,7 @@ const PopoverContent = React.forwardRef<
)}
{...props}
/>
</PopoverPrimitive.Portal>
))
</PopoverPrimitive.Portal>)
PopoverContent.displayName = PopoverPrimitive.Content.displayName
export { Popover, PopoverTrigger, PopoverContent }

View file

@ -6,10 +6,15 @@ import { Circle } from "lucide-react"
import { cn } from "@app/lib/cn"
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
const RadioGroup = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
}
) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
@ -17,13 +22,18 @@ const RadioGroup = React.forwardRef<
ref={ref}
/>
)
})
}
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
const RadioGroupItem = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
}
) => {
return (
<RadioGroupPrimitive.Item
ref={ref}
@ -38,7 +48,7 @@ const RadioGroupItem = React.forwardRef<
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
}
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
export { RadioGroup, RadioGroupItem }

View file

@ -12,11 +12,16 @@ const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
const SelectTrigger = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
}
) => (<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@ -24,55 +29,66 @@ const SelectTrigger = React.forwardRef<
className
)}
{...props}
>
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
</SelectPrimitive.Trigger>)
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
const SelectScrollUpButton = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
}
) => (<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
</SelectPrimitive.ScrollUpButton>)
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
const SelectScrollDownButton = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
}
) => (<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
</SelectPrimitive.ScrollDownButton>)
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
const SelectContent = (
{
ref,
className,
children,
position = "popper",
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
}
) => (<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
@ -96,55 +112,63 @@ const SelectContent = React.forwardRef<
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
</SelectPrimitive.Portal>)
SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
const SelectLabel = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
}
) => (<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
/>)
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
const SelectItem = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
}
) => (<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...props}
>
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
</SelectPrimitive.Item>)
SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
const SelectSeparator = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
}
) => (<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
/>)
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {

View file

@ -5,15 +5,17 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@app/lib/cn"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
const Separator = (
{
ref,
className,
orientation = "horizontal",
decorative = true,
...props
}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
}
) => (<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
@ -23,9 +25,7 @@ const Separator = React.forwardRef<
className
)}
{...props}
/>
)
)
/>)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }

View file

@ -15,19 +15,22 @@ const SheetClose = SheetPrimitive.Close
const SheetPortal = SheetPrimitive.Portal
const SheetOverlay = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Overlay
const SheetOverlay = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
}
) => (<SheetPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
ref={ref}
/>
))
/>)
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva(
@ -53,11 +56,17 @@ interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Content>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
const SheetContent = (
{
ref,
side = "right",
className,
children,
...props
}: SheetContentProps & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
}
) => (<SheetPortal>
<SheetOverlay />
<SheetPrimitive.Content
ref={ref}
@ -70,8 +79,7 @@ const SheetContent = React.forwardRef<
{/* <span className="sr-only">Close</span> */}
{/* </SheetPrimitive.Close> */}
</SheetPrimitive.Content>
</SheetPortal>
))
</SheetPortal>)
SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({
@ -102,28 +110,34 @@ const SheetFooter = ({
)
SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Title
const SheetTitle = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
}
) => (<SheetPrimitive.Title
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
/>)
SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef<
React.ElementRef<typeof SheetPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
>(({ className, ...props }, ref) => (
<SheetPrimitive.Description
const SheetDescription = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
}
) => (<SheetPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
/>)
SheetDescription.displayName = SheetPrimitive.Description.displayName
export {

View file

@ -5,25 +5,28 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@app/lib/cn"
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
const Switch = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
}
) => (<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent 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:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
className
)}
{...props}
ref={ref}
>
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
)}
/>
</SwitchPrimitives.Root>
))
</SwitchPrimitives.Root>)
Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch }

View file

@ -6,107 +6,131 @@ export function TableContainer({ children }: { children: React.ReactNode }) {
return <div className="border rounded-lg bg-card">{children}</div>
}
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
const Table = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableElement> & {
ref: React.RefObject<HTMLTableElement>;
}
) => (<div className="relative w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
))
</div>)
Table.displayName = "Table"
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
const TableHeader = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
TableHeader.displayName = "TableHeader"
const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
const TableBody = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
/>)
TableBody.displayName = "TableBody"
const TableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
const TableFooter = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
className
)}
{...props}
/>
))
/>)
TableFooter.displayName = "TableFooter"
const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
const TableRow = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableRowElement> & {
ref: React.RefObject<HTMLTableRowElement>;
}
) => (<tr
ref={ref}
className={cn(
"border-b transition-colors data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
/>)
TableRow.displayName = "TableRow"
const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
const TableHead = (
{
ref,
className,
...props
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<th
ref={ref}
className={cn(
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
/>
))
/>)
TableHead.displayName = "TableHead"
const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
const TableCell = (
{
ref,
className,
...props
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<td
ref={ref}
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))
/>)
TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
const TableCaption = (
{
ref,
className,
...props
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
ref: React.RefObject<HTMLTableCaptionElement>;
}
) => (<caption
ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
))
/>)
TableCaption.displayName = "TableCaption"
export {

View file

@ -7,49 +7,58 @@ import { cn } from "@app/lib/cn"
const Tabs = TabsPrimitive.Root
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
const TabsList = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
}
) => (<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
)}
{...props}
/>
))
/>)
TabsList.displayName = TabsPrimitive.List.displayName
const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
const TabsTrigger = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
}
) => (<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground",
className
)}
{...props}
/>
))
/>)
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
const TabsContent = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
}
) => (<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-6 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props}
/>
))
/>)
TabsContent.displayName = TabsPrimitive.Content.displayName
export { Tabs, TabsList, TabsTrigger, TabsContent }

View file

@ -5,8 +5,15 @@ import { cn } from "@app/lib/cn"
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
const Textarea = (
{
ref,
className,
...props
}: TextareaProps & {
ref: React.RefObject<HTMLTextAreaElement>;
}
) => {
return (
<textarea
className={cn(
@ -17,8 +24,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
{...props}
/>
)
}
)
}
Textarea.displayName = "Textarea"
export { Textarea }

View file

@ -9,19 +9,22 @@ import { cn } from "@app/lib/cn"
const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Viewport>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Viewport
const ToastViewport = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
}
) => (<ToastPrimitives.Viewport
ref={ref}
className={cn(
"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
className
)}
{...props}
/>
))
/>)
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva(
@ -40,11 +43,14 @@ const toastVariants = cva(
}
)
const Toast = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
const Toast = (
{
ref,
className,
variant,
...props
}
) => {
return (
<ToastPrimitives.Root
ref={ref}
@ -52,29 +58,36 @@ const Toast = React.forwardRef<
{...props}
/>
)
})
}
Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Action>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Action
const ToastAction = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
}
) => (<ToastPrimitives.Action
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
className
)}
{...props}
/>
))
/>)
ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Close>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Close
const ToastClose = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
}
) => (<ToastPrimitives.Close
ref={ref}
className={cn(
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
@ -82,34 +95,39 @@ const ToastClose = React.forwardRef<
)}
toast-close=""
{...props}
>
>
<X className="h-4 w-4" />
</ToastPrimitives.Close>
))
</ToastPrimitives.Close>)
ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Title>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Title
const ToastTitle = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
}
) => (<ToastPrimitives.Title
ref={ref}
className={cn("text-sm font-semibold", className)}
{...props}
/>
))
/>)
ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef<
React.ElementRef<typeof ToastPrimitives.Description>,
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
<ToastPrimitives.Description
const ToastDescription = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
}
) => (<ToastPrimitives.Description
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
))
/>)
ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>