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

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

File diff suppressed because it is too large Load diff

76
src/components/ui/alert.tsx
View file

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

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

105
src/components/ui/breadcrumb.tsx
View file

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

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

@ -51,32 +51,32 @@ export interface ButtonProps
loading?: boolean; // Add loading prop
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{
className,
variant,
size,
asChild = false,
loading = false,
...props
},
ref
) => {
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 Button = (
{
ref,
className,
variant,
size,
asChild = false,
loading = false,
...props
}: ButtonProps & {
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>
);
};
Button.displayName = "Button";
export { Button, buttonVariants };

142
src/components/ui/card.tsx
View file

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

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

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

196
src/components/ui/command.tsx
View file

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

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

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

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

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

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

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

75
src/components/ui/form.tsx
View file

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

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

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

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

@ -5,39 +5,23 @@ import { EyeOff, Eye } from "lucide-react";
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
const Input = (
{
ref,
className,
type,
...props
}: InputProps & {
ref: React.RefObject<HTMLInputElement>;
}
) => {
const [showPassword, setShowPassword] = React.useState(false);
const togglePasswordVisibility = () => setShowPassword(!showPassword);
return type === "password" ? (
<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>
) : (
return type === "password" ? (
<div className="relative">
<input
type={type}
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
@ -45,9 +29,32 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
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
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";
export { Input };

22
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"
)
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
const Label = (
{
ref,
className,
...props
}
) => (<LabelPrimitive.Root
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>)
Label.displayName = LabelPrimitive.Root.displayName
export { Label }

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

@ -7,34 +7,42 @@ import { cn } from "@app/lib/cn"
const Popover = PopoverPrimitive.Root
const PopoverTrigger = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<PopoverPrimitive.Trigger
ref={ref}
className={cn(className, "rounded-md")}
{...props}
/>
))
const PopoverTrigger = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Trigger>>;
}
) => (<PopoverPrimitive.Trigger
ref={ref}
className={cn(className, "rounded-md")}
{...props}
/>)
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
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>
))
const PopoverContent = (
{
ref,
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
}
) => (<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
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
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"
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
const RadioGroup = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
}
) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
@ -17,13 +22,18 @@ const RadioGroup = React.forwardRef<
ref={ref}
/>
)
})
}
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
const RadioGroupItem = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
ref: React.RefObject<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
}
) => {
return (
<RadioGroupPrimitive.Item
ref={ref}
@ -38,7 +48,7 @@ const RadioGroupItem = React.forwardRef<
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
}
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
export { RadioGroup, RadioGroupItem }

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

@ -12,139 +12,163 @@ const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"rounded-md",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
const SelectTrigger = (
{
ref,
className,
children,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
}
) => (<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"rounded-md",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>)
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>
))
const SelectScrollUpButton = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
}
) => (<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</SelectPrimitive.ScrollUpButton>)
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>
))
const SelectScrollDownButton = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
}
) => (<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</SelectPrimitive.ScrollDownButton>)
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"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
)}
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
const SelectContent = (
{
ref,
className,
children,
position = "popper",
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
}
) => (<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"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
)}
position={position}
{...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>
<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
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
const SelectLabel = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
}
) => (<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>)
SelectLabel.displayName = SelectPrimitive.Label.displayName
const SelectItem = (
{
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
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
const SelectSeparator = (
{
ref,
className,
...props
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
}
) => (<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>)
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
export {

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

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

118
src/components/ui/sheet.tsx
View file

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

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

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

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

87
src/components/ui/tabs.tsx
View file

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

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

@ -5,20 +5,26 @@ import { cn } from "@app/lib/cn"
export interface TextareaProps
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ className, ...props }, ref) => {
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}
/>
)
const Textarea = (
{
ref,
className,
...props
}: TextareaProps & {
ref: React.RefObject<HTMLTextAreaElement>;
}
)
) => {
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"
export { Textarea }

154
src/components/ui/toast.tsx
View file

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