mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-11 22:44:56 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

remove forward ref

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

22
src/components/tags/tag-input.tsx
View file

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

50
src/components/ui/alert.tsx
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,
...props
}
) => (<div
ref={ref} ref={ref}
role="alert" role="alert"
className={cn(alertVariants({ variant }), className)} className={cn(alertVariants({ variant }), className)}
{...props} {...props}
/> />);
));
Alert.displayName = "Alert"; Alert.displayName = "Alert";
const AlertTitle = React.forwardRef< const AlertTitle = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLHeadingElement> ref,
>(({ className, ...props }, ref) => ( className,
<h5 ...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<h5
ref={ref} ref={ref}
className={cn( className={cn(
"mb-1 font-medium leading-none tracking-tight", "mb-1 font-medium leading-none tracking-tight",
className, className,
)} )}
{...props} {...props}
/> />);
));
AlertTitle.displayName = "AlertTitle"; AlertTitle.displayName = "AlertTitle";
const AlertDescription = React.forwardRef< const AlertDescription = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLParagraphElement> ref,
>(({ className, ...props }, ref) => ( className,
<div ...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<div
ref={ref} ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)} className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props} {...props}
/> />);
));
AlertDescription.displayName = "AlertDescription"; AlertDescription.displayName = "AlertDescription";
export { Alert, AlertTitle, AlertDescription }; export { Alert, AlertTitle, AlertDescription };

51
src/components/ui/avatar.tsx
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
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
}
) => (<AvatarPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
}
) => (<AvatarPrimitive.Image
ref={ref} ref={ref}
className={cn("aspect-square h-full w-full", className)} className={cn("aspect-square h-full w-full", className)}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
}
) => (<AvatarPrimitive.Fallback
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted", "flex h-full w-full items-center justify-center rounded-full bg-muted",
className className
)} )}
{...props} {...props}
/> />)
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
export { Avatar, AvatarImage, AvatarFallback } export { Avatar, AvatarImage, AvatarFallback }

75
src/components/ui/breadcrumb.tsx
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
}: React.ComponentPropsWithoutRef<"ol"> & {
ref: React.RefObject<HTMLOListElement>;
}
) => (<ol
ref={ref} ref={ref}
className={cn( className={cn(
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
className className
)} )}
{...props} {...props}
/> />)
))
BreadcrumbList.displayName = "BreadcrumbList" BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef< const BreadcrumbItem = (
HTMLLIElement, {
React.ComponentPropsWithoutRef<"li"> ref,
>(({ className, ...props }, ref) => ( className,
<li ...props
}: React.ComponentPropsWithoutRef<"li"> & {
ref: React.RefObject<HTMLLIElement>;
}
) => (<li
ref={ref} ref={ref}
className={cn("inline-flex items-center gap-1.5", className)} className={cn("inline-flex items-center gap-1.5", className)}
{...props} {...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
}: React.ComponentPropsWithoutRef<"span"> & {
ref: React.RefObject<HTMLSpanElement>;
}
) => (<span
ref={ref} ref={ref}
role="link" role="link"
aria-disabled="true" aria-disabled="true"
aria-current="page" aria-current="page"
className={cn("font-normal text-foreground", className)} className={cn("font-normal text-foreground", className)}
{...props} {...props}
/> />)
))
BreadcrumbPage.displayName = "BreadcrumbPage" BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({ const BreadcrumbSeparator = ({

12
src/components/ui/button.tsx
View file

@ -51,17 +51,18 @@ 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"; const Comp = asChild ? Slot : "button";
return ( return (
@ -75,8 +76,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
{props.children} {props.children}
</Comp> </Comp>
); );
} };
);
Button.displayName = "Button"; Button.displayName = "Button";
export { Button, buttonVariants }; export { Button, buttonVariants };

100
src/components/ui/card.tsx
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
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-lg border bg-card text-card-foreground", "rounded-lg border bg-card text-card-foreground",
className, className,
)} )}
{...props} {...props}
/> />);
));
Card.displayName = "Card"; Card.displayName = "Card";
const CardHeader = React.forwardRef< const CardHeader = (
HTMLDivElement, {
React.HTMLAttributes<HTMLDivElement> ref,
>(({ className, ...props }, ref) => ( className,
<div ...props
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref} ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)} className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props} {...props}
/> />);
));
CardHeader.displayName = "CardHeader"; CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef< const CardTitle = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLHeadingElement> ref,
>(({ className, ...props }, ref) => ( className,
<h3 ...props
}: React.HTMLAttributes<HTMLHeadingElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<h3
ref={ref} ref={ref}
className={cn( className={cn(
"text-2xl font-semibold leading-none tracking-tight", "text-2xl font-semibold leading-none tracking-tight",
className, className,
)} )}
{...props} {...props}
/> />);
));
CardTitle.displayName = "CardTitle"; CardTitle.displayName = "CardTitle";
const CardDescription = React.forwardRef< const CardDescription = (
HTMLParagraphElement, {
React.HTMLAttributes<HTMLParagraphElement> ref,
>(({ className, ...props }, ref) => ( className,
<p ...props
}: React.HTMLAttributes<HTMLParagraphElement> & {
ref: React.RefObject<HTMLParagraphElement>;
}
) => (<p
ref={ref} ref={ref}
className={cn("text-sm text-muted-foreground pt-1", className)} className={cn("text-sm text-muted-foreground pt-1", className)}
{...props} {...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
}: React.HTMLAttributes<HTMLDivElement> & {
ref: React.RefObject<HTMLDivElement>;
}
) => (<div
ref={ref} ref={ref}
className={cn("flex items-center p-6 pt-0", className)} className={cn("flex items-center p-6 pt-0", className)}
{...props} {...props}
/> />);
));
CardFooter.displayName = "CardFooter"; CardFooter.displayName = "CardFooter";
export { export {

35
src/components/ui/checkbox.tsx
View file

@ -33,11 +33,16 @@ 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,
...props
}: CheckboxProps & {
ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
}
) => (<CheckboxPrimitive.Root
ref={ref} ref={ref}
className={cn(checkboxVariants({ variant }), className)} className={cn(checkboxVariants({ variant }), className)}
{...props} {...props}
@ -45,8 +50,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Indicator className="flex items-center justify-center text-current"> <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator> </CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root> </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 };

118
src/components/ui/command.tsx
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
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
}
) => (<CommandPrimitive
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className className
)} )}
{...props} {...props}
/> />)
))
Command.displayName = CommandPrimitive.displayName Command.displayName = CommandPrimitive.displayName
interface CommandDialogProps extends DialogProps {} interface CommandDialogProps extends DialogProps {}
@ -37,11 +40,15 @@ 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
}: 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" /> <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input <CommandPrimitive.Input
ref={ref} ref={ref}
@ -51,78 +58,91 @@ const CommandInput = React.forwardRef<
)} )}
{...props} {...props}
/> />
</div> </div>)
))
CommandInput.displayName = CommandPrimitive.Input.displayName CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef< const CommandList = (
React.ElementRef<typeof CommandPrimitive.List>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> ref,
>(({ className, ...props }, ref) => ( className,
<CommandPrimitive.List ...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
}
) => (<CommandPrimitive.List
ref={ref} ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props} {...props}
/> />)
))
CommandList.displayName = CommandPrimitive.List.displayName CommandList.displayName = CommandPrimitive.List.displayName
const CommandEmpty = React.forwardRef< const CommandEmpty = (
React.ElementRef<typeof CommandPrimitive.Empty>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> ref,
>((props, ref) => ( ...props
<CommandPrimitive.Empty }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
}
) => (<CommandPrimitive.Empty
ref={ref} ref={ref}
className="py-6 text-center text-sm" className="py-6 text-center text-sm"
{...props} {...props}
/> />)
))
CommandEmpty.displayName = CommandPrimitive.Empty.displayName CommandEmpty.displayName = CommandPrimitive.Empty.displayName
const CommandGroup = React.forwardRef< const CommandGroup = (
React.ElementRef<typeof CommandPrimitive.Group>, {
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> ref,
>(({ className, ...props }, ref) => ( className,
<CommandPrimitive.Group ...props
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
}
) => (<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", "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 className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
}
) => (<CommandPrimitive.Separator
ref={ref} ref={ref}
className={cn("-mx-1 h-px bg-border", className)} className={cn("-mx-1 h-px bg-border", className)}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
}
) => (<CommandPrimitive.Item
ref={ref} ref={ref}
className={cn( 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", "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, className,
)} )}
{...props} {...props}
/> />)
))
CommandItem.displayName = CommandPrimitive.Item.displayName CommandItem.displayName = CommandPrimitive.Item.displayName

69
src/components/ui/dialog.tsx
View file

@ -14,26 +14,34 @@ 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} 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 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 className
)} )}
{...props} {...props}
/> />);
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef< const DialogContent = (
React.ElementRef<typeof DialogPrimitive.Content>, {
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> ref,
>(({ className, children, ...props }, ref) => ( className,
<DialogPortal> children,
...props
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
}
) => (<DialogPortal>
<DialogOverlay /> <DialogOverlay />
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
@ -49,8 +57,7 @@ const DialogContent = React.forwardRef<
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
</DialogPrimitive.Close> </DialogPrimitive.Close>
</DialogPrimitive.Content> </DialogPrimitive.Content>
</DialogPortal> </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
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
}
) => (<DialogPrimitive.Title
ref={ref} ref={ref}
className={cn( className={cn(
"text-lg font-semibold leading-none tracking-tight", "text-lg font-semibold leading-none tracking-tight",
className className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
}
) => (<DialogPrimitive.Description
ref={ref} ref={ref}
className={cn("text-sm text-muted-foreground", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />);
));
DialogDescription.displayName = DialogPrimitive.Description.displayName; DialogDescription.displayName = DialogPrimitive.Description.displayName;
export { export {

69
src/components/ui/drawer.tsx
View file

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

138
src/components/ui/dropdown-menu.tsx
View file

@ -18,13 +18,15 @@ 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",
@ -35,32 +37,39 @@ const DropdownMenuSubTrigger = React.forwardRef<
> >
{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
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
}
) => (<DropdownMenuPrimitive.SubContent
ref={ref} ref={ref}
className={cn( 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", "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 className
)} )}
{...props} {...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,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
}
) => (<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
ref={ref} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
@ -70,17 +79,17 @@ const DropdownMenuContent = React.forwardRef<
)} )}
{...props} {...props}
/> />
</DropdownMenuPrimitive.Portal> </DropdownMenuPrimitive.Portal>)
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef< const DropdownMenuItem = (
React.ElementRef<typeof DropdownMenuPrimitive.Item>, {
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { ref,
inset?: boolean className,
inset,
...props
} }
>(({ className, inset, ...props }, ref) => ( ) => (<DropdownMenuPrimitive.Item
<DropdownMenuPrimitive.Item
ref={ref} ref={ref}
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", "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 className
)} )}
{...props} {...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,
checked,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
}
) => (<DropdownMenuPrimitive.CheckboxItem
ref={ref} ref={ref}
className={cn( 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", "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",
@ -111,16 +125,20 @@ const DropdownMenuCheckboxItem = React.forwardRef<
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
</DropdownMenuPrimitive.CheckboxItem> </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,
...props
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
}
) => (<DropdownMenuPrimitive.RadioItem
ref={ref} ref={ref}
className={cn( 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", "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",
@ -134,17 +152,17 @@ const DropdownMenuRadioItem = React.forwardRef<
</DropdownMenuPrimitive.ItemIndicator> </DropdownMenuPrimitive.ItemIndicator>
</span> </span>
{children} {children}
</DropdownMenuPrimitive.RadioItem> </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",
@ -152,20 +170,22 @@ const DropdownMenuLabel = React.forwardRef<
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
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
}
) => (<DropdownMenuPrimitive.Separator
ref={ref} ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)} className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props} {...props}
/> />)
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({ const DropdownMenuShortcut = ({

75
src/components/ui/form.tsx
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 {

63
src/components/ui/input-otp.tsx
View file

@ -6,11 +6,16 @@ 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,
...props
}: React.ComponentPropsWithoutRef<typeof OTPInput> & {
ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
}
) => (<OTPInput
ref={ref} ref={ref}
containerClassName={cn( containerClassName={cn(
"flex items-center gap-2 has-disabled:opacity-50", "flex items-center gap-2 has-disabled:opacity-50",
@ -18,22 +23,28 @@ const InputOTP = React.forwardRef<
)} )}
className={cn("disabled:cursor-not-allowed", className)} className={cn("disabled:cursor-not-allowed", className)}
{...props} {...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"> & {
ref: React.RefObject<React.ElementRef<"div">>;
}
) => (<div ref={ref} role="separator" {...props}>
<Dot /> <Dot />
</div> </div>)
))
InputOTPSeparator.displayName = "InputOTPSeparator" InputOTPSeparator.displayName = "InputOTPSeparator"
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

15
src/components/ui/input.tsx
View file

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

16
src/components/ui/label.tsx
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 }
) => (<LabelPrimitive.Root
ref={ref} ref={ref}
className={cn(labelVariants(), className)} className={cn(labelVariants(), className)}
{...props} {...props}
/> />)
))
Label.displayName = LabelPrimitive.Root.displayName Label.displayName = LabelPrimitive.Root.displayName
export { Label } export { Label }

36
src/components/ui/popover.tsx
View file

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

30
src/components/ui/radio-group.tsx
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 }

124
src/components/ui/select.tsx
View file

@ -12,11 +12,16 @@ 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,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
}
) => (<SelectPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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", "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",
@ -29,15 +34,18 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Icon asChild> <SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" /> <ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon> </SelectPrimitive.Icon>
</SelectPrimitive.Trigger> </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
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
}
) => (<SelectPrimitive.ScrollUpButton
ref={ref} ref={ref}
className={cn( className={cn(
"flex cursor-default items-center justify-center py-1", "flex cursor-default items-center justify-center py-1",
@ -46,15 +54,18 @@ const SelectScrollUpButton = React.forwardRef<
{...props} {...props}
> >
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton> </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
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
}
) => (<SelectPrimitive.ScrollDownButton
ref={ref} ref={ref}
className={cn( className={cn(
"flex cursor-default items-center justify-center py-1", "flex cursor-default items-center justify-center py-1",
@ -63,16 +74,21 @@ const SelectScrollDownButton = React.forwardRef<
{...props} {...props}
> >
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton> </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,
position = "popper",
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
}
) => (<SelectPrimitive.Portal>
<SelectPrimitive.Content <SelectPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
@ -96,27 +112,34 @@ const SelectContent = React.forwardRef<
</SelectPrimitive.Viewport> </SelectPrimitive.Viewport>
<SelectScrollDownButton /> <SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>)
))
SelectContent.displayName = SelectPrimitive.Content.displayName SelectContent.displayName = SelectPrimitive.Content.displayName
const SelectLabel = React.forwardRef< const SelectLabel = (
React.ElementRef<typeof SelectPrimitive.Label>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> ref,
>(({ className, ...props }, ref) => ( className,
<SelectPrimitive.Label ...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
}
) => (<SelectPrimitive.Label
ref={ref} ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props} {...props}
/> />)
))
SelectLabel.displayName = SelectPrimitive.Label.displayName SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = React.forwardRef< const SelectItem = (
React.ElementRef<typeof SelectPrimitive.Item>, {
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> ref,
>(({ className, children, ...props }, ref) => ( className,
<SelectPrimitive.Item children,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
}
) => (<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 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",
@ -129,22 +152,23 @@ const SelectItem = React.forwardRef<
<Check className="h-4 w-4" /> <Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator> </SelectPrimitive.ItemIndicator>
</span> </span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </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
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
}
) => (<SelectPrimitive.Separator
ref={ref} ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)} className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props} {...props}
/> />)
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export { export {

24
src/components/ui/separator.tsx
View file

@ -5,15 +5,17 @@ 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>>;
}
) => (<SeparatorPrimitive.Root
ref={ref} ref={ref}
decorative={decorative} decorative={decorative}
orientation={orientation} orientation={orientation}
@ -23,9 +25,7 @@ const Separator = React.forwardRef<
className className
)} )}
{...props} {...props}
/> />)
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator } export { Separator }

70
src/components/ui/sheet.tsx
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
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
}
) => (<SheetPrimitive.Overlay
className={cn( 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", "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 className
)} )}
{...props} {...props}
ref={ref} ref={ref}
/> />)
))
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
const sheetVariants = cva( const sheetVariants = cva(
@ -53,11 +56,17 @@ 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,
children,
...props
}: SheetContentProps & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
}
) => (<SheetPortal>
<SheetOverlay /> <SheetOverlay />
<SheetPrimitive.Content <SheetPrimitive.Content
ref={ref} ref={ref}
@ -70,8 +79,7 @@ const SheetContent = React.forwardRef<
{/* <span className="sr-only">Close</span> */} {/* <span className="sr-only">Close</span> */}
{/* </SheetPrimitive.Close> */} {/* </SheetPrimitive.Close> */}
</SheetPrimitive.Content> </SheetPrimitive.Content>
</SheetPortal> </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
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
}
) => (<SheetPrimitive.Title
ref={ref} ref={ref}
className={cn("text-lg font-semibold text-foreground", className)} className={cn("text-lg font-semibold text-foreground", className)}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
}
) => (<SheetPrimitive.Description
ref={ref} ref={ref}
className={cn("text-sm text-muted-foreground", className)} className={cn("text-sm text-muted-foreground", className)}
{...props} {...props}
/> />)
))
SheetDescription.displayName = SheetPrimitive.Description.displayName SheetDescription.displayName = SheetPrimitive.Description.displayName
export { export {

17
src/components/ui/switch.tsx
View file

@ -5,11 +5,15 @@ 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( 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", "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 className
@ -22,8 +26,7 @@ const Switch = React.forwardRef<
"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" "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 Switch.displayName = SwitchPrimitives.Root.displayName
export { Switch } export { Switch }

134
src/components/ui/table.tsx
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
}: React.HTMLAttributes<HTMLTableElement> & {
ref: React.RefObject<HTMLTableElement>;
}
) => (<div className="relative w-full overflow-auto">
<table <table
ref={ref} ref={ref}
className={cn("w-full caption-bottom text-sm", className)} className={cn("w-full caption-bottom text-sm", className)}
{...props} {...props}
/> />
</div> </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
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<tbody
ref={ref} ref={ref}
className={cn("[&_tr:last-child]:border-0", className)} className={cn("[&_tr:last-child]:border-0", className)}
{...props} {...props}
/> />)
))
TableBody.displayName = "TableBody" TableBody.displayName = "TableBody"
const TableFooter = React.forwardRef< const TableFooter = (
HTMLTableSectionElement, {
React.HTMLAttributes<HTMLTableSectionElement> ref,
>(({ className, ...props }, ref) => ( className,
<tfoot ...props
}: React.HTMLAttributes<HTMLTableSectionElement> & {
ref: React.RefObject<HTMLTableSectionElement>;
}
) => (<tfoot
ref={ref} ref={ref}
className={cn( className={cn(
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
className className
)} )}
{...props} {...props}
/> />)
))
TableFooter.displayName = "TableFooter" TableFooter.displayName = "TableFooter"
const TableRow = React.forwardRef< const TableRow = (
HTMLTableRowElement, {
React.HTMLAttributes<HTMLTableRowElement> ref,
>(({ className, ...props }, ref) => ( className,
<tr ...props
}: React.HTMLAttributes<HTMLTableRowElement> & {
ref: React.RefObject<HTMLTableRowElement>;
}
) => (<tr
ref={ref} ref={ref}
className={cn( className={cn(
"border-b transition-colors data-[state=selected]:bg-muted", "border-b transition-colors data-[state=selected]:bg-muted",
className className
)} )}
{...props} {...props}
/> />)
))
TableRow.displayName = "TableRow" TableRow.displayName = "TableRow"
const TableHead = React.forwardRef< const TableHead = (
HTMLTableCellElement, {
React.ThHTMLAttributes<HTMLTableCellElement> ref,
>(({ className, ...props }, ref) => ( className,
<th ...props
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<th
ref={ref} ref={ref}
className={cn( className={cn(
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", "h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className className
)} )}
{...props} {...props}
/> />)
))
TableHead.displayName = "TableHead" TableHead.displayName = "TableHead"
const TableCell = React.forwardRef< const TableCell = (
HTMLTableCellElement, {
React.TdHTMLAttributes<HTMLTableCellElement> ref,
>(({ className, ...props }, ref) => ( className,
<td ...props
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
ref: React.RefObject<HTMLTableCellElement>;
}
) => (<td
ref={ref} ref={ref}
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)} className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props} {...props}
/> />)
))
TableCell.displayName = "TableCell" TableCell.displayName = "TableCell"
const TableCaption = React.forwardRef< const TableCaption = (
HTMLTableCaptionElement, {
React.HTMLAttributes<HTMLTableCaptionElement> ref,
>(({ className, ...props }, ref) => ( className,
<caption ...props
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
ref: React.RefObject<HTMLTableCaptionElement>;
}
) => (<caption
ref={ref} ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)} className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props} {...props}
/> />)
))
TableCaption.displayName = "TableCaption" TableCaption.displayName = "TableCaption"
export { export {

51
src/components/ui/tabs.tsx
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
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
}
) => (<TabsPrimitive.List
ref={ref} ref={ref}
className={cn( className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
}
) => (<TabsPrimitive.Trigger
ref={ref} ref={ref}
className={cn( 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", "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 className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
}
) => (<TabsPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
"mt-6 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "mt-6 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className className
)} )}
{...props} {...props}
/> />)
))
TabsContent.displayName = TabsPrimitive.Content.displayName TabsContent.displayName = TabsPrimitive.Content.displayName
export { Tabs, TabsList, TabsTrigger, TabsContent } export { Tabs, TabsList, TabsTrigger, TabsContent }

12
src/components/ui/textarea.tsx
View file

@ -5,8 +5,15 @@ 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) => { {
ref,
className,
...props
}: TextareaProps & {
ref: React.RefObject<HTMLTextAreaElement>;
}
) => {
return ( return (
<textarea <textarea
className={cn( className={cn(
@ -18,7 +25,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
/> />
) )
} }
)
Textarea.displayName = "Textarea" Textarea.displayName = "Textarea"
export { Textarea } export { Textarea }

100
src/components/ui/toast.tsx
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
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
}
) => (<ToastPrimitives.Viewport
ref={ref} ref={ref}
className={cn( 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]", "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 className
)} )}
{...props} {...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,29 +58,36 @@ 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
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
}
) => (<ToastPrimitives.Action
ref={ref} ref={ref}
className={cn( 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", "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 className
)} )}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
}
) => (<ToastPrimitives.Close
ref={ref} ref={ref}
className={cn( 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", "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",
@ -84,32 +97,37 @@ const ToastClose = React.forwardRef<
{...props} {...props}
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</ToastPrimitives.Close> </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
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
}
) => (<ToastPrimitives.Title
ref={ref} ref={ref}
className={cn("text-sm font-semibold", className)} className={cn("text-sm font-semibold", className)}
{...props} {...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
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
}
) => (<ToastPrimitives.Description
ref={ref} ref={ref}
className={cn("text-sm opacity-90", className)} className={cn("text-sm opacity-90", className)}
{...props} {...props}
/> />)
))
ToastDescription.displayName = ToastPrimitives.Description.displayName ToastDescription.displayName = ToastPrimitives.Description.displayName
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast> type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>