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

File diff suppressed because it is too large Load diff

View file

@ -22,44 +22,52 @@ const alertVariants = cva(
}, },
); );
const Alert = React.forwardRef< const Alert = (
HTMLDivElement, {
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> ref,
>(({ className, variant, ...props }, ref) => ( className,
<div variant,
ref={ref} ...props
role="alert" }
className={cn(alertVariants({ variant }), className)} ) => (<div
{...props} ref={ref}
/> role="alert"
)); className={cn(alertVariants({ variant }), className)}
{...props}
/>);
Alert.displayName = "Alert"; Alert.displayName = "Alert";
const AlertTitle = React.forwardRef< const AlertTitle = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLHeadingElement> ref,
>(({ className, ...props }, ref) => ( className,
<h5 ...props
ref={ref} }: React.HTMLAttributes<HTMLHeadingElement> & {
className={cn( ref: React.RefObject<HTMLParagraphElement>;
"mb-1 font-medium leading-none tracking-tight", }
className, ) => (<h5
)} ref={ref}
{...props} className={cn(
/> "mb-1 font-medium leading-none tracking-tight",
)); className,
)}
{...props}
/>);
AlertTitle.displayName = "AlertTitle"; AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef< const AlertDescription = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLParagraphElement> ref,
>(({ className, ...props }, ref) => ( className,
<div ...props
ref={ref} }: React.HTMLAttributes<HTMLParagraphElement> & {
className={cn("text-sm [&_p]:leading-relaxed", className)} ref: React.RefObject<HTMLParagraphElement>;
{...props} }
/> ) => (<div
)); ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>);
AlertDescription.displayName = "AlertDescription"; AlertDescription.displayName = "AlertDescription";
export { Alert, AlertTitle, 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" import { cn } from "@app/lib/cn"
const Avatar = React.forwardRef< const Avatar = (
React.ElementRef<typeof AvatarPrimitive.Root>, {
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> ref,
>(({ className, ...props }, ref) => ( className,
<AvatarPrimitive.Root ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", }
className ) => (<AvatarPrimitive.Root
)} ref={ref}
{...props} className={cn(
/> "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
)) className
)}
{...props}
/>)
Avatar.displayName = AvatarPrimitive.Root.displayName Avatar.displayName = AvatarPrimitive.Root.displayName
const AvatarImage = React.forwardRef< const AvatarImage = (
React.ElementRef<typeof AvatarPrimitive.Image>, {
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> ref,
>(({ className, ...props }, ref) => ( className,
<AvatarPrimitive.Image ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
className={cn("aspect-square h-full w-full", className)} ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
{...props} }
/> ) => (<AvatarPrimitive.Image
)) ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>)
AvatarImage.displayName = AvatarPrimitive.Image.displayName AvatarImage.displayName = AvatarPrimitive.Image.displayName
const AvatarFallback = React.forwardRef< const AvatarFallback = (
React.ElementRef<typeof AvatarPrimitive.Fallback>, {
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> ref,
>(({ className, ...props }, ref) => ( className,
<AvatarPrimitive.Fallback ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
"flex h-full w-full items-center justify-center rounded-full bg-muted", }
className ) => (<AvatarPrimitive.Fallback
)} ref={ref}
{...props} className={cn(
/> "flex h-full w-full items-center justify-center rounded-full bg-muted",
)) className
)}
{...props}
/>)
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback } export { Avatar, AvatarImage, AvatarFallback }

View file

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

View file

@ -51,32 +51,32 @@ export interface ButtonProps
loading?: boolean; // Add loading prop loading?: boolean; // Add loading prop
} }
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = (
( {
{ ref,
className, className,
variant, variant,
size, size,
asChild = false, asChild = false,
loading = false, loading = false,
...props ...props
}, }: ButtonProps & {
ref ref: React.RefObject<HTMLButtonElement>;
) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
disabled={loading || props.disabled} // Disable button when loading
{...props}
>
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{props.children}
</Comp>
);
} }
); ) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
disabled={loading || props.disabled} // Disable button when loading
{...props}
>
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{props.children}
</Comp>
);
};
Button.displayName = "Button"; Button.displayName = "Button";
export { Button, buttonVariants }; export { Button, buttonVariants };

View file

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

View file

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

View file

@ -8,19 +8,22 @@ import { Search } from "lucide-react"
import { cn } from "@app/lib/cn" import { cn } from "@app/lib/cn"
import { Dialog, DialogContent } from "@/components/ui/dialog" import { Dialog, DialogContent } from "@/components/ui/dialog"
const Command = React.forwardRef< const Command = (
React.ElementRef<typeof CommandPrimitive>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive> ref,
>(({ className, ...props }, ref) => ( className,
<CommandPrimitive ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", }
className ) => (<CommandPrimitive
)} ref={ref}
{...props} className={cn(
/> "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
)) className
)}
{...props}
/>)
Command.displayName = CommandPrimitive.displayName Command.displayName = CommandPrimitive.displayName
interface CommandDialogProps extends DialogProps {} interface CommandDialogProps extends DialogProps {}
@ -37,92 +40,109 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
) )
} }
const CommandInput = React.forwardRef< const CommandInput = (
React.ElementRef<typeof CommandPrimitive.Input>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> ref,
>(({ className, ...props }, ref) => ( className,
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> ...props
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
<CommandPrimitive.Input ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
ref={ref} }
className={cn( ) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
"flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
className <CommandPrimitive.Input
)}
{...props}
/>
</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
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
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
ref={ref} ref={ref}
className={cn( 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", "flex h-11 w-full rounded-md bg-transparent py-3 text-base md:text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className className
)} )}
{...props} {...props}
/> />
)) </div>)
CommandInput.displayName = CommandPrimitive.Input.displayName
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 = (
{
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 = (
{
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 CommandGroup.displayName = CommandPrimitive.Group.displayName
const CommandSeparator = React.forwardRef< const CommandSeparator = (
React.ElementRef<typeof CommandPrimitive.Separator>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> ref,
>(({ className, ...props }, ref) => ( className,
<CommandPrimitive.Separator ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
className={cn("-mx-1 h-px bg-border", className)} ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
{...props} }
/> ) => (<CommandPrimitive.Separator
)) ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>)
CommandSeparator.displayName = CommandPrimitive.Separator.displayName CommandSeparator.displayName = CommandPrimitive.Separator.displayName
const CommandItem = React.forwardRef< const CommandItem = (
React.ElementRef<typeof CommandPrimitive.Item>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> ref,
>(({ className, ...props }, ref) => ( className,
<CommandPrimitive.Item ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
"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, ) => (<CommandPrimitive.Item
)} ref={ref}
{...props} 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 CommandItem.displayName = CommandPrimitive.Item.displayName

View file

@ -14,43 +14,50 @@ const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close; const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef< const DialogOverlay = (
React.ElementRef<typeof DialogPrimitive.Overlay>, {
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> ref,
>(({ className, ...props }, ref) => ( className,
<DialogPrimitive.Overlay ...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 = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
}
) => (<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( 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", "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className className
)} )}
{...props} {...props}
/> >
)); {children}
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
const DialogContent = React.forwardRef< <span className="sr-only">Close</span>
React.ElementRef<typeof DialogPrimitive.Content>, </DialogPrimitive.Close>
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> </DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => ( </DialogPortal>);
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName; DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ const DialogHeader = ({
@ -81,31 +88,37 @@ const DialogFooter = ({
); );
DialogFooter.displayName = "DialogFooter"; DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef< const DialogTitle = (
React.ElementRef<typeof DialogPrimitive.Title>, {
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> ref,
>(({ className, ...props }, ref) => ( className,
<DialogPrimitive.Title ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
"text-lg font-semibold leading-none tracking-tight", }
className ) => (<DialogPrimitive.Title
)} ref={ref}
{...props} className={cn(
/> "text-lg font-semibold leading-none tracking-tight",
)); className
)}
{...props}
/>);
DialogTitle.displayName = DialogPrimitive.Title.displayName; DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef< const DialogDescription = (
React.ElementRef<typeof DialogPrimitive.Description>, {
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> ref,
>(({ className, ...props }, ref) => ( className,
<DialogPrimitive.Description ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
className={cn("text-sm text-muted-foreground", className)} ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
{...props} }
/> ) => (<DialogPrimitive.Description
)); ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>);
DialogDescription.displayName = DialogPrimitive.Description.displayName; DialogDescription.displayName = DialogPrimitive.Description.displayName;
export { export {

View file

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

View file

@ -18,154 +18,174 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef< const DropdownMenuSubTrigger = (
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { ref,
inset?: boolean className,
inset,
children,
...props
} }
>(({ className, inset, children, ...props }, ref) => ( ) => (<DropdownMenuPrimitive.SubTrigger
<DropdownMenuPrimitive.SubTrigger ref={ref}
ref={ref} className={cn(
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",
"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", inset && "pl-8",
inset && "pl-8", className
className )}
)} {...props}
{...props} >
> {children}
{children} <ChevronRight className="ml-auto h-4 w-4" />
<ChevronRight className="ml-auto h-4 w-4" /> </DropdownMenuPrimitive.SubTrigger>)
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName = DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef< const DropdownMenuSubContent = (
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> ref,
>(({ className, ...props }, ref) => ( className,
<DropdownMenuPrimitive.SubContent ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
"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 ) => (<DropdownMenuPrimitive.SubContent
)} ref={ref}
{...props} 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 = DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef< const DropdownMenuContent = (
React.ElementRef<typeof DropdownMenuPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> ref,
>(({ className, sideOffset = 4, ...props }, ref) => ( className,
<DropdownMenuPrimitive.Portal> sideOffset = 4,
<DropdownMenuPrimitive.Content ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
sideOffset={sideOffset} ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-foreground shadow-md 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}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
} }
>(({ className, inset, ...props }, ref) => ( ) => (<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Content
ref={ref} ref={ref}
sideOffset={sideOffset}
className={cn( 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", "z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-foreground shadow-md 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",
inset && "pl-8",
className className
)} )}
{...props} {...props}
/> />
)) </DropdownMenuPrimitive.Portal>)
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = (
{
ref,
className,
inset,
...props
}
) => (<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",
inset && "pl-8",
className
)}
{...props}
/>)
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef< const DropdownMenuCheckboxItem = (
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> ref,
>(({ className, children, checked, ...props }, ref) => ( className,
<DropdownMenuPrimitive.CheckboxItem children,
ref={ref} checked,
className={cn( ...props
"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", }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
className ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
)} }
checked={checked} ) => (<DropdownMenuPrimitive.CheckboxItem
{...props} ref={ref}
> className={cn(
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> "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",
<DropdownMenuPrimitive.ItemIndicator> className
<Check className="h-4 w-4" /> )}
</DropdownMenuPrimitive.ItemIndicator> checked={checked}
</span> {...props}
{children} >
</DropdownMenuPrimitive.CheckboxItem> <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>)
DropdownMenuCheckboxItem.displayName = DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef< const DropdownMenuRadioItem = (
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> ref,
>(({ className, children, ...props }, ref) => ( className,
<DropdownMenuPrimitive.RadioItem children,
ref={ref} ...props
className={cn( }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
"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", ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
className }
)} ) => (<DropdownMenuPrimitive.RadioItem
{...props} ref={ref}
> className={cn(
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> "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",
<DropdownMenuPrimitive.ItemIndicator> className
<Circle className="h-2 w-2 fill-current" /> )}
</DropdownMenuPrimitive.ItemIndicator> {...props}
</span> >
{children} <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
</DropdownMenuPrimitive.RadioItem> <DropdownMenuPrimitive.ItemIndicator>
)) <Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>)
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef< const DropdownMenuLabel = (
React.ElementRef<typeof DropdownMenuPrimitive.Label>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { ref,
inset?: boolean className,
inset,
...props
} }
>(({ className, inset, ...props }, ref) => ( ) => (<DropdownMenuPrimitive.Label
<DropdownMenuPrimitive.Label ref={ref}
ref={ref} className={cn(
className={cn( "px-2 py-1.5 text-sm font-semibold",
"px-2 py-1.5 text-sm font-semibold", inset && "pl-8",
inset && "pl-8", className
className )}
)} {...props}
{...props} />)
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef< const DropdownMenuSeparator = (
React.ElementRef<typeof DropdownMenuPrimitive.Separator>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> ref,
>(({ className, ...props }, ref) => ( className,
<DropdownMenuPrimitive.Separator ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
className={cn("-mx-1 my-1 h-px bg-muted", className)} ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
{...props} }
/> ) => (<DropdownMenuPrimitive.Separator
)) ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>)
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({ const DropdownMenuShortcut = ({

View file

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

View file

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

View file

@ -5,39 +5,23 @@ import { EyeOff, Eye } from "lucide-react";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>; export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>( const Input = (
({ className, type, ...props }, ref) => { {
const [showPassword, setShowPassword] = React.useState(false); ref,
const togglePasswordVisibility = () => setShowPassword(!showPassword); className,
type,
...props
}: InputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
return type === "password" ? ( return type === "password" ? (
<div className="relative"> <div className="relative">
<input
type={showPassword ? "text" : "password"}
className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
<div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
{showPassword ? (
<EyeOff
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
) : (
<Eye
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
)}
</div>
</div>
) : (
<input <input
type={type} type={showPassword ? "text" : "password"}
className={cn( className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", "flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className className
@ -45,9 +29,32 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
ref={ref} ref={ref}
{...props} {...props}
/> />
); <div className="absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400">
} {showPassword ? (
); <EyeOff
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
) : (
<Eye
className="h-4 w-4"
onClick={togglePasswordVisibility}
/>
)}
</div>
</div>
) : (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-base md:file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
);
};
Input.displayName = "Input"; Input.displayName = "Input";
export { 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" "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
) )
const Label = React.forwardRef< const Label = (
React.ElementRef<typeof LabelPrimitive.Root>, {
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & ref,
VariantProps<typeof labelVariants> className,
>(({ className, ...props }, ref) => ( ...props
<LabelPrimitive.Root }
ref={ref} ) => (<LabelPrimitive.Root
className={cn(labelVariants(), className)} ref={ref}
{...props} className={cn(labelVariants(), className)}
/> {...props}
)) />)
Label.displayName = LabelPrimitive.Root.displayName Label.displayName = LabelPrimitive.Root.displayName
export { Label } export { Label }

View file

@ -7,34 +7,42 @@ import { cn } from "@app/lib/cn"
const Popover = PopoverPrimitive.Root const Popover = PopoverPrimitive.Root
const PopoverTrigger = React.forwardRef< const PopoverTrigger = (
React.ElementRef<typeof PopoverPrimitive.Trigger>, {
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> ref,
>(({ className, ...props }, ref) => ( className,
<PopoverPrimitive.Trigger ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
className={cn(className, "rounded-md")} ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Trigger>>;
{...props} }
/> ) => (<PopoverPrimitive.Trigger
)) ref={ref}
className={cn(className, "rounded-md")}
{...props}
/>)
const PopoverContent = React.forwardRef< const PopoverContent = (
React.ElementRef<typeof PopoverPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> ref,
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( className,
<PopoverPrimitive.Portal> align = "center",
<PopoverPrimitive.Content sideOffset = 4,
ref={ref} ...props
align={align} }: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
sideOffset={sideOffset} ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
className={cn( }
"z-50 w-72 rounded-md border-2 bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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", ) => (<PopoverPrimitive.Portal>
className <PopoverPrimitive.Content
)} ref={ref}
{...props} align={align}
/> sideOffset={sideOffset}
</PopoverPrimitive.Portal> className={cn(
)) "z-50 w-72 rounded-md border-2 bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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}
/>
</PopoverPrimitive.Portal>)
PopoverContent.displayName = PopoverPrimitive.Content.displayName PopoverContent.displayName = PopoverPrimitive.Content.displayName
export { Popover, PopoverTrigger, PopoverContent } export { Popover, PopoverTrigger, PopoverContent }

View file

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

View file

@ -12,139 +12,163 @@ const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef< const SelectTrigger = (
React.ElementRef<typeof SelectPrimitive.Trigger>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> ref,
>(({ className, children, ...props }, ref) => ( className,
<SelectPrimitive.Trigger children,
ref={ref} ...props
className={cn( }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
"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", ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
"rounded-md", }
className ) => (<SelectPrimitive.Trigger
)} ref={ref}
{...props} 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",
{children} "rounded-md",
<SelectPrimitive.Icon asChild> className
<ChevronDown className="h-4 w-4 opacity-50" /> )}
</SelectPrimitive.Icon> {...props}
</SelectPrimitive.Trigger> >
)) {children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>)
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef< const SelectScrollUpButton = (
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> ref,
>(({ className, ...props }, ref) => ( className,
<SelectPrimitive.ScrollUpButton ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
"flex cursor-default items-center justify-center py-1", }
className ) => (<SelectPrimitive.ScrollUpButton
)} ref={ref}
{...props} className={cn(
> "flex cursor-default items-center justify-center py-1",
<ChevronUp className="h-4 w-4" /> className
</SelectPrimitive.ScrollUpButton> )}
)) {...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>)
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef< const SelectScrollDownButton = (
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> ref,
>(({ className, ...props }, ref) => ( className,
<SelectPrimitive.ScrollDownButton ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
"flex cursor-default items-center justify-center py-1", }
className ) => (<SelectPrimitive.ScrollDownButton
)} ref={ref}
{...props} className={cn(
> "flex cursor-default items-center justify-center py-1",
<ChevronDown className="h-4 w-4" /> className
</SelectPrimitive.ScrollDownButton> )}
)) {...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>)
SelectScrollDownButton.displayName = SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef< const SelectContent = (
React.ElementRef<typeof SelectPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> ref,
>(({ className, children, position = "popper", ...props }, ref) => ( className,
<SelectPrimitive.Portal> children,
<SelectPrimitive.Content position = "popper",
ref={ref} ...props
className={cn( }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover text-popover-foreground shadow-md 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", ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
position === "popper" && }
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", ) => (<SelectPrimitive.Portal>
className <SelectPrimitive.Content
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</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
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
ref={ref} ref={ref}
className={cn( 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", "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover text-popover-foreground shadow-md 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",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className className
)} )}
position={position}
{...props} {...props}
> >
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> <SelectScrollUpButton />
<SelectPrimitive.ItemIndicator> <SelectPrimitive.Viewport
<Check className="h-4 w-4" /> className={cn(
</SelectPrimitive.ItemIndicator> "p-1",
</span> position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</SelectPrimitive.Viewport>
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>)
SelectContent.displayName = SelectPrimitive.Content.displayName
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> const SelectLabel = (
</SelectPrimitive.Item> {
)) 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 = (
{
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>)
SelectItem.displayName = SelectPrimitive.Item.displayName SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef< const SelectSeparator = (
React.ElementRef<typeof SelectPrimitive.Separator>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> ref,
>(({ className, ...props }, ref) => ( className,
<SelectPrimitive.Separator ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
className={cn("-mx-1 my-1 h-px bg-muted", className)} ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
{...props} }
/> ) => (<SelectPrimitive.Separator
)) ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>)
SelectSeparator.displayName = SelectPrimitive.Separator.displayName SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export { export {

View file

@ -5,27 +5,27 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@app/lib/cn" import { cn } from "@app/lib/cn"
const Separator = React.forwardRef< const Separator = (
React.ElementRef<typeof SeparatorPrimitive.Root>, {
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> ref,
>( className,
( orientation = "horizontal",
{ className, orientation = "horizontal", decorative = true, ...props }, decorative = true,
ref ...props
) => ( }: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
<SeparatorPrimitive.Root ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
ref={ref} }
decorative={decorative} ) => (<SeparatorPrimitive.Root
orientation={orientation} ref={ref}
className={cn( decorative={decorative}
"shrink-0 bg-border", orientation={orientation}
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className={cn(
className "shrink-0 bg-border",
)} orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
{...props} className
/> )}
) {...props}
) />)
Separator.displayName = SeparatorPrimitive.Root.displayName Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator } export { Separator }

View file

@ -15,19 +15,22 @@ const SheetClose = SheetPrimitive.Close
const SheetPortal = SheetPrimitive.Portal const SheetPortal = SheetPrimitive.Portal
const SheetOverlay = React.forwardRef< const SheetOverlay = (
React.ElementRef<typeof SheetPrimitive.Overlay>, {
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> ref,
>(({ className, ...props }, ref) => ( className,
<SheetPrimitive.Overlay ...props
className={cn( }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
"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", ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
className }
)} ) => (<SheetPrimitive.Overlay
{...props} className={cn(
ref={ref} "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 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva( const sheetVariants = cva(
@ -53,25 +56,30 @@ interface SheetContentProps
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
VariantProps<typeof sheetVariants> {} VariantProps<typeof sheetVariants> {}
const SheetContent = React.forwardRef< const SheetContent = (
React.ElementRef<typeof SheetPrimitive.Content>, {
SheetContentProps ref,
>(({ side = "right", className, children, ...props }, ref) => ( side = "right",
<SheetPortal> className,
<SheetOverlay /> children,
<SheetPrimitive.Content ...props
ref={ref} }: SheetContentProps & {
className={cn(sheetVariants({ side }), className)} ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
{...props} }
> ) => (<SheetPortal>
{children} <SheetOverlay />
{/* <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> */} <SheetPrimitive.Content
{/* <X className="h-4 w-4" /> */} ref={ref}
{/* <span className="sr-only">Close</span> */} className={cn(sheetVariants({ side }), className)}
{/* </SheetPrimitive.Close> */} {...props}
</SheetPrimitive.Content> >
</SheetPortal> {children}
)) {/* <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> */}
{/* <X className="h-4 w-4" /> */}
{/* <span className="sr-only">Close</span> */}
{/* </SheetPrimitive.Close> */}
</SheetPrimitive.Content>
</SheetPortal>)
SheetContent.displayName = SheetPrimitive.Content.displayName SheetContent.displayName = SheetPrimitive.Content.displayName
const SheetHeader = ({ const SheetHeader = ({
@ -102,28 +110,34 @@ const SheetFooter = ({
) )
SheetFooter.displayName = "SheetFooter" SheetFooter.displayName = "SheetFooter"
const SheetTitle = React.forwardRef< const SheetTitle = (
React.ElementRef<typeof SheetPrimitive.Title>, {
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> ref,
>(({ className, ...props }, ref) => ( className,
<SheetPrimitive.Title ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
className={cn("text-lg font-semibold text-foreground", className)} ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
{...props} }
/> ) => (<SheetPrimitive.Title
)) ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>)
SheetTitle.displayName = SheetPrimitive.Title.displayName SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef< const SheetDescription = (
React.ElementRef<typeof SheetPrimitive.Description>, {
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> ref,
>(({ className, ...props }, ref) => ( className,
<SheetPrimitive.Description ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
className={cn("text-sm text-muted-foreground", className)} ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
{...props} }
/> ) => (<SheetPrimitive.Description
)) ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>)
SheetDescription.displayName = SheetPrimitive.Description.displayName SheetDescription.displayName = SheetPrimitive.Description.displayName
export { export {

View file

@ -5,25 +5,28 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@app/lib/cn" import { cn } from "@app/lib/cn"
const Switch = React.forwardRef< const Switch = (
React.ElementRef<typeof SwitchPrimitives.Root>, {
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> ref,
>(({ className, ...props }, ref) => ( className,
<SwitchPrimitives.Root ...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( 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", "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"
className
)} )}
{...props} />
ref={ref} </SwitchPrimitives.Root>)
>
<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>
))
Switch.displayName = SwitchPrimitives.Root.displayName Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch } 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> return <div className="border rounded-lg bg-card">{children}</div>
} }
const Table = React.forwardRef< const Table = (
HTMLTableElement, {
React.HTMLAttributes<HTMLTableElement> ref,
>(({ className, ...props }, ref) => ( className,
<div className="relative w-full overflow-auto"> ...props
<table }: React.HTMLAttributes<HTMLTableElement> & {
ref={ref} ref: React.RefObject<HTMLTableElement>;
className={cn("w-full caption-bottom text-sm", className)} }
{...props} ) => (<div className="relative w-full overflow-auto">
/> <table
</div> ref={ref}
)) className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>)
Table.displayName = "Table" Table.displayName = "Table"
const TableHeader = React.forwardRef< const TableHeader = (
HTMLTableSectionElement, {
React.HTMLAttributes<HTMLTableSectionElement> ref,
>(({ className, ...props }, ref) => ( className,
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> ...props
)) }: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
TableHeader.displayName = "TableHeader" TableHeader.displayName = "TableHeader"
const TableBody = React.forwardRef< const TableBody = (
HTMLTableSectionElement, {
React.HTMLAttributes<HTMLTableSectionElement> ref,
>(({ className, ...props }, ref) => ( className,
<tbody ...props
ref={ref} }: React.HTMLAttributes<HTMLTableSectionElement> & {
className={cn("[&_tr:last-child]:border-0", className)} ref: React.RefObject<HTMLTableSectionElement>;
{...props} }
/> ) => (<tbody
)) ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>)
TableBody.displayName = "TableBody" TableBody.displayName = "TableBody"
const TableFooter = React.forwardRef< const TableFooter = (
HTMLTableSectionElement, {
React.HTMLAttributes<HTMLTableSectionElement> ref,
>(({ className, ...props }, ref) => ( className,
<tfoot ...props
ref={ref} }: React.HTMLAttributes<HTMLTableSectionElement> & {
className={cn( ref: React.RefObject<HTMLTableSectionElement>;
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", }
className ) => (<tfoot
)} ref={ref}
{...props} className={cn(
/> "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
)) className
)}
{...props}
/>)
TableFooter.displayName = "TableFooter" TableFooter.displayName = "TableFooter"
const TableRow = React.forwardRef< const TableRow = (
HTMLTableRowElement, {
React.HTMLAttributes<HTMLTableRowElement> ref,
>(({ className, ...props }, ref) => ( className,
<tr ...props
ref={ref} }: React.HTMLAttributes<HTMLTableRowElement> & {
className={cn( ref: React.RefObject<HTMLTableRowElement>;
"border-b transition-colors data-[state=selected]:bg-muted", }
className ) => (<tr
)} ref={ref}
{...props} className={cn(
/> "border-b transition-colors data-[state=selected]:bg-muted",
)) className
)}
{...props}
/>)
TableRow.displayName = "TableRow" TableRow.displayName = "TableRow"
const TableHead = React.forwardRef< const TableHead = (
HTMLTableCellElement, {
React.ThHTMLAttributes<HTMLTableCellElement> ref,
>(({ className, ...props }, ref) => ( className,
<th ...props
ref={ref} }: React.ThHTMLAttributes<HTMLTableCellElement> & {
className={cn( ref: React.RefObject<HTMLTableCellElement>;
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", }
className ) => (<th
)} ref={ref}
{...props} 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" TableHead.displayName = "TableHead"
const TableCell = React.forwardRef< const TableCell = (
HTMLTableCellElement, {
React.TdHTMLAttributes<HTMLTableCellElement> ref,
>(({ className, ...props }, ref) => ( className,
<td ...props
ref={ref} }: React.TdHTMLAttributes<HTMLTableCellElement> & {
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)} ref: React.RefObject<HTMLTableCellElement>;
{...props} }
/> ) => (<td
)) ref={ref}
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>)
TableCell.displayName = "TableCell" TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef< const TableCaption = (
HTMLTableCaptionElement, {
React.HTMLAttributes<HTMLTableCaptionElement> ref,
>(({ className, ...props }, ref) => ( className,
<caption ...props
ref={ref} }: React.HTMLAttributes<HTMLTableCaptionElement> & {
className={cn("mt-4 text-sm text-muted-foreground", className)} ref: React.RefObject<HTMLTableCaptionElement>;
{...props} }
/> ) => (<caption
)) ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>)
TableCaption.displayName = "TableCaption" TableCaption.displayName = "TableCaption"
export { export {

View file

@ -7,49 +7,58 @@ import { cn } from "@app/lib/cn"
const Tabs = TabsPrimitive.Root const Tabs = TabsPrimitive.Root
const TabsList = React.forwardRef< const TabsList = (
React.ElementRef<typeof TabsPrimitive.List>, {
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> ref,
>(({ className, ...props }, ref) => ( className,
<TabsPrimitive.List ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", }
className ) => (<TabsPrimitive.List
)} ref={ref}
{...props} 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 TabsList.displayName = TabsPrimitive.List.displayName
const TabsTrigger = React.forwardRef< const TabsTrigger = (
React.ElementRef<typeof TabsPrimitive.Trigger>, {
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> ref,
>(({ className, ...props }, ref) => ( className,
<TabsPrimitive.Trigger ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
"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 ) => (<TabsPrimitive.Trigger
)} ref={ref}
{...props} 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 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
const TabsContent = React.forwardRef< const TabsContent = (
React.ElementRef<typeof TabsPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> ref,
>(({ className, ...props }, ref) => ( className,
<TabsPrimitive.Content ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
"mt-6 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", }
className ) => (<TabsPrimitive.Content
)} ref={ref}
{...props} 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 TabsContent.displayName = TabsPrimitive.Content.displayName
export { Tabs, TabsList, TabsTrigger, TabsContent } export { Tabs, TabsList, TabsTrigger, TabsContent }

View file

@ -5,20 +5,26 @@ import { cn } from "@app/lib/cn"
export interface TextareaProps export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {} extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>( const Textarea = (
({ className, ...props }, ref) => { {
return ( ref,
<textarea className,
className={cn( ...props
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", }: TextareaProps & {
className ref: React.RefObject<HTMLTextAreaElement>;
)}
ref={ref}
{...props}
/>
)
} }
) ) => {
return (
<textarea
className={cn(
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
Textarea.displayName = "Textarea" Textarea.displayName = "Textarea"
export { Textarea } export { Textarea }

View file

@ -9,19 +9,22 @@ import { cn } from "@app/lib/cn"
const ToastProvider = ToastPrimitives.Provider const ToastProvider = ToastPrimitives.Provider
const ToastViewport = React.forwardRef< const ToastViewport = (
React.ElementRef<typeof ToastPrimitives.Viewport>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> ref,
>(({ className, ...props }, ref) => ( className,
<ToastPrimitives.Viewport ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
"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 ) => (<ToastPrimitives.Viewport
)} ref={ref}
{...props} 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 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
const toastVariants = cva( const toastVariants = cva(
@ -40,11 +43,14 @@ const toastVariants = cva(
} }
) )
const Toast = React.forwardRef< const Toast = (
React.ElementRef<typeof ToastPrimitives.Root>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & ref,
VariantProps<typeof toastVariants> className,
>(({ className, variant, ...props }, ref) => { variant,
...props
}
) => {
return ( return (
<ToastPrimitives.Root <ToastPrimitives.Root
ref={ref} ref={ref}
@ -52,64 +58,76 @@ const Toast = React.forwardRef<
{...props} {...props}
/> />
) )
}) }
Toast.displayName = ToastPrimitives.Root.displayName Toast.displayName = ToastPrimitives.Root.displayName
const ToastAction = React.forwardRef< const ToastAction = (
React.ElementRef<typeof ToastPrimitives.Action>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> ref,
>(({ className, ...props }, ref) => ( className,
<ToastPrimitives.Action ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
"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 ) => (<ToastPrimitives.Action
)} ref={ref}
{...props} 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 ToastAction.displayName = ToastPrimitives.Action.displayName
const ToastClose = React.forwardRef< const ToastClose = (
React.ElementRef<typeof ToastPrimitives.Close>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> ref,
>(({ className, ...props }, ref) => ( className,
<ToastPrimitives.Close ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
className={cn( ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
"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", }
className ) => (<ToastPrimitives.Close
)} ref={ref}
toast-close="" className={cn(
{...props} "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",
> className
<X className="h-4 w-4" /> )}
</ToastPrimitives.Close> toast-close=""
)) {...props}
>
<X className="h-4 w-4" />
</ToastPrimitives.Close>)
ToastClose.displayName = ToastPrimitives.Close.displayName ToastClose.displayName = ToastPrimitives.Close.displayName
const ToastTitle = React.forwardRef< const ToastTitle = (
React.ElementRef<typeof ToastPrimitives.Title>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> ref,
>(({ className, ...props }, ref) => ( className,
<ToastPrimitives.Title ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
className={cn("text-sm font-semibold", className)} ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
{...props} }
/> ) => (<ToastPrimitives.Title
)) ref={ref}
className={cn("text-sm font-semibold", className)}
{...props}
/>)
ToastTitle.displayName = ToastPrimitives.Title.displayName ToastTitle.displayName = ToastPrimitives.Title.displayName
const ToastDescription = React.forwardRef< const ToastDescription = (
React.ElementRef<typeof ToastPrimitives.Description>, {
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> ref,
>(({ className, ...props }, ref) => ( className,
<ToastPrimitives.Description ...props
ref={ref} }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
className={cn("text-sm opacity-90", className)} ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
{...props} }
/> ) => (<ToastPrimitives.Description
)) ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>)
ToastDescription.displayName = ToastPrimitives.Description.displayName ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast> type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>