mirror of
https://github.com/fosrl/pangolin.git
synced 2025-07-11 22:44:56 +02:00
remove forward ref
This commit is contained in:
miloschwartz
parent
521bbbf1d6
commit
f14379a1c8
25 changed files with 2067 additions and 1779 deletions
|
|
@ -105,8 +105,14 @@ export interface TagInputProps
|
|||
generateTagId?: () => string;
|
||||
}
|
||||
|
||||
const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
||||
(props, ref) => {
|
||||
const TagInput = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: TagInputProps & {
|
||||
ref: React.RefObject<HTMLInputElement>;
|
||||
}
|
||||
) => {
|
||||
const {
|
||||
id,
|
||||
placeholder,
|
||||
|
|
@ -449,7 +455,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
|||
: displayedTags;
|
||||
|
||||
return (
|
||||
<div
|
||||
(<div
|
||||
className={`w-full flex ${!inlineTags && tags.length > 0 ? "gap-3" : ""} ${
|
||||
inputFieldPosition === "bottom"
|
||||
? "flex-col"
|
||||
|
|
@ -606,7 +612,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
|||
// styleClasses?.input,
|
||||
// )}
|
||||
// />
|
||||
<Input
|
||||
(<Input
|
||||
ref={inputRef}
|
||||
id={id}
|
||||
type="text"
|
||||
|
|
@ -640,7 +646,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
|||
(maxTags !== undefined &&
|
||||
tags.length >= maxTags)
|
||||
}
|
||||
/>
|
||||
/>)
|
||||
) : (
|
||||
<div
|
||||
className={cn(
|
||||
|
|
@ -918,7 +924,6 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showCount && maxTags && (
|
||||
<div className="flex">
|
||||
<span className="text-muted-foreground text-sm mt-1 ml-auto">
|
||||
|
|
@ -935,10 +940,9 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
|
|||
Clear All
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>)
|
||||
);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
TagInput.displayName = "TagInput";
|
||||
|
||||
|
|
|
|||
|
|
@ -22,44 +22,52 @@ const alertVariants = cva(
|
|||
},
|
||||
);
|
||||
|
||||
const Alert = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<div
|
||||
const Alert = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}
|
||||
) => (<div
|
||||
ref={ref}
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
Alert.displayName = "Alert";
|
||||
|
||||
const AlertTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h5
|
||||
const AlertTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLHeadingElement> & {
|
||||
ref: React.RefObject<HTMLParagraphElement>;
|
||||
}
|
||||
) => (<h5
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mb-1 font-medium leading-none tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
AlertTitle.displayName = "AlertTitle";
|
||||
|
||||
const AlertDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
const AlertDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLParagraphElement> & {
|
||||
ref: React.RefObject<HTMLParagraphElement>;
|
||||
}
|
||||
) => (<div
|
||||
ref={ref}
|
||||
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
AlertDescription.displayName = "AlertDescription";
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription };
|
||||
|
|
|
|||
|
|
@ -5,46 +5,55 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
|||
|
||||
import { cn } from "@app/lib/cn"
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Root
|
||||
const Avatar = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Root>>;
|
||||
}
|
||||
) => (<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName
|
||||
|
||||
const AvatarImage = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
const AvatarImage = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Image>>;
|
||||
}
|
||||
) => (<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
||||
|
||||
const AvatarFallback = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Fallback
|
||||
const AvatarFallback = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof AvatarPrimitive.Fallback>>;
|
||||
}
|
||||
) => (<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
|
|
|
|||
|
|
@ -4,47 +4,55 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"
|
|||
|
||||
import { cn } from "@app/lib/cn"
|
||||
|
||||
const Breadcrumb = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.ComponentPropsWithoutRef<"nav"> & {
|
||||
separator?: React.ReactNode
|
||||
const Breadcrumb = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}
|
||||
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
|
||||
) => <nav ref={ref} aria-label="breadcrumb" {...props} />
|
||||
Breadcrumb.displayName = "Breadcrumb"
|
||||
|
||||
const BreadcrumbList = React.forwardRef<
|
||||
HTMLOListElement,
|
||||
React.ComponentPropsWithoutRef<"ol">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ol
|
||||
const BreadcrumbList = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"ol"> & {
|
||||
ref: React.RefObject<HTMLOListElement>;
|
||||
}
|
||||
) => (<ol
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
BreadcrumbList.displayName = "BreadcrumbList"
|
||||
|
||||
const BreadcrumbItem = React.forwardRef<
|
||||
HTMLLIElement,
|
||||
React.ComponentPropsWithoutRef<"li">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<li
|
||||
const BreadcrumbItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"li"> & {
|
||||
ref: React.RefObject<HTMLLIElement>;
|
||||
}
|
||||
) => (<li
|
||||
ref={ref}
|
||||
className={cn("inline-flex items-center gap-1.5", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
BreadcrumbItem.displayName = "BreadcrumbItem"
|
||||
|
||||
const BreadcrumbLink = React.forwardRef<
|
||||
HTMLAnchorElement,
|
||||
React.ComponentPropsWithoutRef<"a"> & {
|
||||
asChild?: boolean
|
||||
const BreadcrumbLink = (
|
||||
{
|
||||
ref,
|
||||
asChild,
|
||||
className,
|
||||
...props
|
||||
}
|
||||
>(({ asChild, className, ...props }, ref) => {
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "a"
|
||||
|
||||
return (
|
||||
|
|
@ -54,22 +62,25 @@ const BreadcrumbLink = React.forwardRef<
|
|||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
BreadcrumbLink.displayName = "BreadcrumbLink"
|
||||
|
||||
const BreadcrumbPage = React.forwardRef<
|
||||
HTMLSpanElement,
|
||||
React.ComponentPropsWithoutRef<"span">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<span
|
||||
const BreadcrumbPage = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"span"> & {
|
||||
ref: React.RefObject<HTMLSpanElement>;
|
||||
}
|
||||
) => (<span
|
||||
ref={ref}
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("font-normal text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
BreadcrumbPage.displayName = "BreadcrumbPage"
|
||||
|
||||
const BreadcrumbSeparator = ({
|
||||
|
|
|
|||
|
|
@ -51,18 +51,19 @@ export interface ButtonProps
|
|||
loading?: boolean; // Add loading prop
|
||||
}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
const Button = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
loading = false,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
}: ButtonProps & {
|
||||
ref: React.RefObject<HTMLButtonElement>;
|
||||
}
|
||||
) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
|
|
@ -75,8 +76,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|||
{props.children}
|
||||
</Comp>
|
||||
);
|
||||
}
|
||||
);
|
||||
};
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
|
|
|
|||
|
|
@ -2,78 +2,96 @@ import * as React from "react";
|
|||
|
||||
import { cn } from "@app/lib/cn";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
const Card = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
}
|
||||
) => (<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-lg border bg-card text-card-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
const CardHeader = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
}
|
||||
) => (<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
const CardTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLHeadingElement> & {
|
||||
ref: React.RefObject<HTMLParagraphElement>;
|
||||
}
|
||||
) => (<h3
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-2xl font-semibold leading-none tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
const CardDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLParagraphElement> & {
|
||||
ref: React.RefObject<HTMLParagraphElement>;
|
||||
}
|
||||
) => (<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground pt-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
));
|
||||
const CardContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
}
|
||||
) => (<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />);
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
const CardFooter = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & {
|
||||
ref: React.RefObject<HTMLDivElement>;
|
||||
}
|
||||
) => (<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -33,20 +33,24 @@ interface CheckboxProps
|
|||
extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
|
||||
VariantProps<typeof checkboxVariants> {}
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
CheckboxProps
|
||||
>(({ className, variant, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
const Checkbox = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: CheckboxProps & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CheckboxPrimitive.Root>>;
|
||||
}
|
||||
) => (<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(checkboxVariants({ variant }), className)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
</CheckboxPrimitive.Root>);
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
interface CheckboxWithLabelProps
|
||||
|
|
@ -54,10 +58,17 @@ interface CheckboxWithLabelProps
|
|||
label: string;
|
||||
}
|
||||
|
||||
const CheckboxWithLabel = React.forwardRef<
|
||||
React.ElementRef<typeof Checkbox>,
|
||||
CheckboxWithLabelProps
|
||||
>(({ className, label, id, ...props }, ref) => {
|
||||
const CheckboxWithLabel = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
label,
|
||||
id,
|
||||
...props
|
||||
}: CheckboxWithLabelProps & {
|
||||
ref: React.RefObject<React.ElementRef<typeof Checkbox>>;
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<div className={cn("flex items-center space-x-2", className)}>
|
||||
<Checkbox id={id} ref={ref} {...props} />
|
||||
|
|
@ -69,7 +80,7 @@ const CheckboxWithLabel = React.forwardRef<
|
|||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
CheckboxWithLabel.displayName = "CheckboxWithLabel";
|
||||
|
||||
export { Checkbox, CheckboxWithLabel };
|
||||
|
|
|
|||
|
|
@ -8,19 +8,22 @@ import { Search } from "lucide-react"
|
|||
import { cn } from "@app/lib/cn"
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog"
|
||||
|
||||
const Command = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive
|
||||
const Command = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive>>;
|
||||
}
|
||||
) => (<CommandPrimitive
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
Command.displayName = CommandPrimitive.displayName
|
||||
|
||||
interface CommandDialogProps extends DialogProps {}
|
||||
|
|
@ -37,11 +40,15 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
|
|||
)
|
||||
}
|
||||
|
||||
const CommandInput = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
||||
const CommandInput = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Input>>;
|
||||
}
|
||||
) => (<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<CommandPrimitive.Input
|
||||
ref={ref}
|
||||
|
|
@ -51,78 +58,91 @@ const CommandInput = React.forwardRef<
|
|||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
</div>)
|
||||
|
||||
CommandInput.displayName = CommandPrimitive.Input.displayName
|
||||
|
||||
const CommandList = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.List
|
||||
const CommandList = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.List>>;
|
||||
}
|
||||
) => (<CommandPrimitive.List
|
||||
ref={ref}
|
||||
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
|
||||
CommandList.displayName = CommandPrimitive.List.displayName
|
||||
|
||||
const CommandEmpty = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||
>((props, ref) => (
|
||||
<CommandPrimitive.Empty
|
||||
const CommandEmpty = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Empty>>;
|
||||
}
|
||||
) => (<CommandPrimitive.Empty
|
||||
ref={ref}
|
||||
className="py-6 text-center text-sm"
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
|
||||
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
|
||||
|
||||
const CommandGroup = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Group
|
||||
const CommandGroup = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Group>>;
|
||||
}
|
||||
) => (<CommandPrimitive.Group
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
|
||||
CommandGroup.displayName = CommandPrimitive.Group.displayName
|
||||
|
||||
const CommandSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Separator
|
||||
const CommandSeparator = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Separator>>;
|
||||
}
|
||||
) => (<CommandPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
|
||||
|
||||
const CommandItem = React.forwardRef<
|
||||
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CommandPrimitive.Item
|
||||
const CommandItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof CommandPrimitive.Item>>;
|
||||
}
|
||||
) => (<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none rounded-md items-center px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
|
||||
CommandItem.displayName = CommandPrimitive.Item.displayName
|
||||
|
||||
|
|
|
|||
|
|
@ -14,26 +14,34 @@ const DialogPortal = DialogPrimitive.Portal;
|
|||
|
||||
const DialogClose = DialogPrimitive.Close;
|
||||
|
||||
const DialogOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
const DialogOverlay = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Overlay>>;
|
||||
}
|
||||
) => (<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||
|
||||
const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DialogPortal>
|
||||
const DialogContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Content>>;
|
||||
}
|
||||
) => (<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
|
|
@ -49,8 +57,7 @@ const DialogContent = React.forwardRef<
|
|||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
));
|
||||
</DialogPortal>);
|
||||
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||
|
||||
const DialogHeader = ({
|
||||
|
|
@ -81,31 +88,37 @@ const DialogFooter = ({
|
|||
);
|
||||
DialogFooter.displayName = "DialogFooter";
|
||||
|
||||
const DialogTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Title
|
||||
const DialogTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Title>>;
|
||||
}
|
||||
) => (<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||
|
||||
const DialogDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Description
|
||||
const DialogDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DialogPrimitive.Description>>;
|
||||
}
|
||||
) => (<DialogPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -22,23 +22,31 @@ const DrawerPortal = DrawerPrimitive.Portal;
|
|||
|
||||
const DrawerClose = DrawerPrimitive.Close;
|
||||
|
||||
const DrawerOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Overlay
|
||||
const DrawerOverlay = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Overlay>>;
|
||||
}
|
||||
) => (<DrawerPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn("fixed inset-0 z-50 bg-black/80", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
|
||||
|
||||
const DrawerContent = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DrawerPortal>
|
||||
const DrawerContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Content>>;
|
||||
}
|
||||
) => (<DrawerPortal>
|
||||
<DrawerOverlay />
|
||||
<DrawerPrimitive.Content
|
||||
ref={ref}
|
||||
|
|
@ -51,8 +59,7 @@ const DrawerContent = React.forwardRef<
|
|||
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPortal>
|
||||
));
|
||||
</DrawerPortal>);
|
||||
DrawerContent.displayName = "DrawerContent";
|
||||
|
||||
const DrawerHeader = ({
|
||||
|
|
@ -77,31 +84,37 @@ const DrawerFooter = ({
|
|||
);
|
||||
DrawerFooter.displayName = "DrawerFooter";
|
||||
|
||||
const DrawerTitle = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Title
|
||||
const DrawerTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Title>>;
|
||||
}
|
||||
) => (<DrawerPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
|
||||
|
||||
const DrawerDescription = React.forwardRef<
|
||||
React.ElementRef<typeof DrawerPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DrawerPrimitive.Description
|
||||
const DrawerDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DrawerPrimitive.Description>>;
|
||||
}
|
||||
) => (<DrawerPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
/>);
|
||||
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -18,13 +18,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
|||
|
||||
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||
|
||||
const DropdownMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
const DropdownMenuSubTrigger = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubTrigger
|
||||
) => (<DropdownMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
|
||||
|
|
@ -32,35 +34,42 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
|||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</DropdownMenuPrimitive.SubTrigger>
|
||||
))
|
||||
</DropdownMenuPrimitive.SubTrigger>)
|
||||
DropdownMenuSubTrigger.displayName =
|
||||
DropdownMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const DropdownMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.SubContent
|
||||
const DropdownMenuSubContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>;
|
||||
}
|
||||
) => (<DropdownMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border-2 bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
DropdownMenuSubContent.displayName =
|
||||
DropdownMenuPrimitive.SubContent.displayName
|
||||
|
||||
const DropdownMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Portal>
|
||||
const DropdownMenuContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Content>>;
|
||||
}
|
||||
) => (<DropdownMenuPrimitive.Portal>
|
||||
<DropdownMenuPrimitive.Content
|
||||
ref={ref}
|
||||
sideOffset={sideOffset}
|
||||
|
|
@ -70,17 +79,17 @@ const DropdownMenuContent = React.forwardRef<
|
|||
)}
|
||||
{...props}
|
||||
/>
|
||||
</DropdownMenuPrimitive.Portal>
|
||||
))
|
||||
</DropdownMenuPrimitive.Portal>)
|
||||
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||
|
||||
const DropdownMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
const DropdownMenuItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Item
|
||||
) => (<DropdownMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
|
|
@ -88,15 +97,20 @@ const DropdownMenuItem = React.forwardRef<
|
|||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||
|
||||
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.CheckboxItem
|
||||
const DropdownMenuCheckboxItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
|
||||
}
|
||||
) => (<DropdownMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
|
|
@ -104,47 +118,51 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
|||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
</DropdownMenuPrimitive.CheckboxItem>)
|
||||
DropdownMenuCheckboxItem.displayName =
|
||||
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const DropdownMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.RadioItem
|
||||
const DropdownMenuRadioItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>;
|
||||
}
|
||||
) => (<DropdownMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<DropdownMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-2 w-2 fill-current" />
|
||||
</DropdownMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</DropdownMenuPrimitive.RadioItem>
|
||||
))
|
||||
</DropdownMenuPrimitive.RadioItem>)
|
||||
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const DropdownMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
const DropdownMenuLabel = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Label
|
||||
) => (<DropdownMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold",
|
||||
|
|
@ -152,20 +170,22 @@ const DropdownMenuLabel = React.forwardRef<
|
|||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||
|
||||
const DropdownMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DropdownMenuPrimitive.Separator
|
||||
const DropdownMenuSeparator = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>;
|
||||
}
|
||||
) => (<DropdownMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||
|
||||
const DropdownMenuShortcut = ({
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,16 @@ import { Dot } from "lucide-react"
|
|||
|
||||
import { cn } from "@app/lib/cn"
|
||||
|
||||
const InputOTP = React.forwardRef<
|
||||
React.ElementRef<typeof OTPInput>,
|
||||
React.ComponentPropsWithoutRef<typeof OTPInput>
|
||||
>(({ className, containerClassName, ...props }, ref) => (
|
||||
<OTPInput
|
||||
const InputOTP = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
containerClassName,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof OTPInput> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof OTPInput>>;
|
||||
}
|
||||
) => (<OTPInput
|
||||
ref={ref}
|
||||
containerClassName={cn(
|
||||
"flex items-center gap-2 has-disabled:opacity-50",
|
||||
|
|
@ -18,22 +23,28 @@ const InputOTP = React.forwardRef<
|
|||
)}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
InputOTP.displayName = "InputOTP"
|
||||
|
||||
const InputOTPGroup = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div">
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("flex items-center", className)} {...props} />
|
||||
))
|
||||
const InputOTPGroup = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"div"> & {
|
||||
ref: React.RefObject<React.ElementRef<"div">>;
|
||||
}
|
||||
) => (<div ref={ref} className={cn("flex items-center", className)} {...props} />)
|
||||
InputOTPGroup.displayName = "InputOTPGroup"
|
||||
|
||||
const InputOTPSlot = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div"> & { index: number }
|
||||
>(({ index, className, ...props }, ref) => {
|
||||
const InputOTPSlot = (
|
||||
{
|
||||
ref,
|
||||
index,
|
||||
className,
|
||||
...props
|
||||
}
|
||||
) => {
|
||||
const inputOTPContext = React.useContext(OTPInputContext)
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
|
||||
|
||||
|
|
@ -55,17 +66,19 @@ const InputOTPSlot = React.forwardRef<
|
|||
)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
InputOTPSlot.displayName = "InputOTPSlot"
|
||||
|
||||
const InputOTPSeparator = React.forwardRef<
|
||||
React.ElementRef<"div">,
|
||||
React.ComponentPropsWithoutRef<"div">
|
||||
>(({ ...props }, ref) => (
|
||||
<div ref={ref} role="separator" {...props}>
|
||||
const InputOTPSeparator = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<"div"> & {
|
||||
ref: React.RefObject<React.ElementRef<"div">>;
|
||||
}
|
||||
) => (<div ref={ref} role="separator" {...props}>
|
||||
<Dot />
|
||||
</div>
|
||||
))
|
||||
</div>)
|
||||
InputOTPSeparator.displayName = "InputOTPSeparator"
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
|
||||
|
|
|
|||
|
|
@ -5,8 +5,16 @@ import { EyeOff, Eye } from "lucide-react";
|
|||
|
||||
export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
|
||||
|
||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, type, ...props }, ref) => {
|
||||
const Input = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
type,
|
||||
...props
|
||||
}: InputProps & {
|
||||
ref: React.RefObject<HTMLInputElement>;
|
||||
}
|
||||
) => {
|
||||
const [showPassword, setShowPassword] = React.useState(false);
|
||||
const togglePasswordVisibility = () => setShowPassword(!showPassword);
|
||||
|
||||
|
|
@ -46,8 +54,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
};
|
||||
Input.displayName = "Input";
|
||||
|
||||
export { Input };
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@ const labelVariants = cva(
|
|||
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
)
|
||||
|
||||
const Label = React.forwardRef<
|
||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||
VariantProps<typeof labelVariants>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<LabelPrimitive.Root
|
||||
const Label = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}
|
||||
) => (<LabelPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
|
||||
export { Label }
|
||||
|
|
|
|||
|
|
@ -7,22 +7,31 @@ import { cn } from "@app/lib/cn"
|
|||
|
||||
const Popover = PopoverPrimitive.Root
|
||||
|
||||
const PopoverTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<PopoverPrimitive.Trigger
|
||||
const PopoverTrigger = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Trigger>>;
|
||||
}
|
||||
) => (<PopoverPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(className, "rounded-md")}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
|
||||
const PopoverContent = React.forwardRef<
|
||||
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||
<PopoverPrimitive.Portal>
|
||||
const PopoverContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
align = "center",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof PopoverPrimitive.Content>>;
|
||||
}
|
||||
) => (<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
ref={ref}
|
||||
align={align}
|
||||
|
|
@ -33,8 +42,7 @@ const PopoverContent = React.forwardRef<
|
|||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
))
|
||||
</PopoverPrimitive.Portal>)
|
||||
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent }
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -12,11 +12,16 @@ const SelectGroup = SelectPrimitive.Group
|
|||
|
||||
const SelectValue = SelectPrimitive.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Trigger
|
||||
const SelectTrigger = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Trigger>>;
|
||||
}
|
||||
) => (<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-9 w-full items-center justify-between border-2 border-input bg-card px-3 py-2 text-base md:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
||||
|
|
@ -24,55 +29,66 @@ const SelectTrigger = React.forwardRef<
|
|||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
{children}
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
))
|
||||
</SelectPrimitive.Trigger>)
|
||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
const SelectScrollUpButton = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>;
|
||||
}
|
||||
) => (<SelectPrimitive.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
))
|
||||
</SelectPrimitive.ScrollUpButton>)
|
||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
const SelectScrollDownButton = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>;
|
||||
}
|
||||
) => (<SelectPrimitive.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default items-center justify-center py-1",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
))
|
||||
</SelectPrimitive.ScrollDownButton>)
|
||||
SelectScrollDownButton.displayName =
|
||||
SelectPrimitive.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||
>(({ className, children, position = "popper", ...props }, ref) => (
|
||||
<SelectPrimitive.Portal>
|
||||
const SelectContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
position = "popper",
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Content>>;
|
||||
}
|
||||
) => (<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
|
|
@ -96,55 +112,63 @@ const SelectContent = React.forwardRef<
|
|||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
))
|
||||
</SelectPrimitive.Portal>)
|
||||
SelectContent.displayName = SelectPrimitive.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Label
|
||||
const SelectLabel = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Label>>;
|
||||
}
|
||||
) => (<SelectPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<SelectPrimitive.Item
|
||||
const SelectItem = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Item>>;
|
||||
}
|
||||
) => (<SelectPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<SelectPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</span>
|
||||
|
||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||
</SelectPrimitive.Item>
|
||||
))
|
||||
</SelectPrimitive.Item>)
|
||||
SelectItem.displayName = SelectPrimitive.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SelectPrimitive.Separator
|
||||
const SelectSeparator = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SelectPrimitive.Separator>>;
|
||||
}
|
||||
) => (<SelectPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -5,15 +5,17 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
|||
|
||||
import { cn } from "@app/lib/cn"
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
ref
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
const Separator = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SeparatorPrimitive.Root>>;
|
||||
}
|
||||
) => (<SeparatorPrimitive.Root
|
||||
ref={ref}
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
|
|
@ -23,9 +25,7 @@ const Separator = React.forwardRef<
|
|||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
/>)
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
|
||||
export { Separator }
|
||||
|
|
|
|||
|
|
@ -15,19 +15,22 @@ const SheetClose = SheetPrimitive.Close
|
|||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
const SheetOverlay = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Overlay>>;
|
||||
}
|
||||
) => (<SheetPrimitive.Overlay
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
|
||||
const sheetVariants = cva(
|
||||
|
|
@ -53,11 +56,17 @@ interface SheetContentProps
|
|||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
VariantProps<typeof sheetVariants> {}
|
||||
|
||||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
const SheetContent = (
|
||||
{
|
||||
ref,
|
||||
side = "right",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: SheetContentProps & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Content>>;
|
||||
}
|
||||
) => (<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
ref={ref}
|
||||
|
|
@ -70,8 +79,7 @@ const SheetContent = React.forwardRef<
|
|||
{/* <span className="sr-only">Close</span> */}
|
||||
{/* </SheetPrimitive.Close> */}
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
</SheetPortal>)
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
|
||||
const SheetHeader = ({
|
||||
|
|
@ -102,28 +110,34 @@ const SheetFooter = ({
|
|||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
const SheetTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Title>>;
|
||||
}
|
||||
) => (<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
const SheetDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SheetPrimitive.Description>>;
|
||||
}
|
||||
) => (<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -5,25 +5,28 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
|
|||
|
||||
import { cn } from "@app/lib/cn"
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
const Switch = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof SwitchPrimitives.Root>>;
|
||||
}
|
||||
) => (<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
))
|
||||
</SwitchPrimitives.Root>)
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName
|
||||
|
||||
export { Switch }
|
||||
|
|
|
|||
|
|
@ -6,107 +6,131 @@ export function TableContainer({ children }: { children: React.ReactNode }) {
|
|||
return <div className="border rounded-lg bg-card">{children}</div>
|
||||
}
|
||||
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="relative w-full overflow-auto">
|
||||
const Table = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableElement> & {
|
||||
ref: React.RefObject<HTMLTableElement>;
|
||||
}
|
||||
) => (<div className="relative w-full overflow-auto">
|
||||
<table
|
||||
ref={ref}
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
</div>)
|
||||
Table.displayName = "Table"
|
||||
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||
))
|
||||
const TableHeader = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement> & {
|
||||
ref: React.RefObject<HTMLTableSectionElement>;
|
||||
}
|
||||
) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
|
||||
TableHeader.displayName = "TableHeader"
|
||||
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody
|
||||
const TableBody = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement> & {
|
||||
ref: React.RefObject<HTMLTableSectionElement>;
|
||||
}
|
||||
) => (<tbody
|
||||
ref={ref}
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableBody.displayName = "TableBody"
|
||||
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
const TableFooter = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableSectionElement> & {
|
||||
ref: React.RefObject<HTMLTableSectionElement>;
|
||||
}
|
||||
) => (<tfoot
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableFooter.displayName = "TableFooter"
|
||||
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr
|
||||
const TableRow = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableRowElement> & {
|
||||
ref: React.RefObject<HTMLTableRowElement>;
|
||||
}
|
||||
) => (<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b transition-colors data-[state=selected]:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableRow.displayName = "TableRow"
|
||||
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th
|
||||
const TableHead = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ThHTMLAttributes<HTMLTableCellElement> & {
|
||||
ref: React.RefObject<HTMLTableCellElement>;
|
||||
}
|
||||
) => (<th
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"h-10 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableHead.displayName = "TableHead"
|
||||
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
const TableCell = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.TdHTMLAttributes<HTMLTableCellElement> & {
|
||||
ref: React.RefObject<HTMLTableCellElement>;
|
||||
}
|
||||
) => (<td
|
||||
ref={ref}
|
||||
className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableCell.displayName = "TableCell"
|
||||
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
const TableCaption = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLTableCaptionElement> & {
|
||||
ref: React.RefObject<HTMLTableCaptionElement>;
|
||||
}
|
||||
) => (<caption
|
||||
ref={ref}
|
||||
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TableCaption.displayName = "TableCaption"
|
||||
|
||||
export {
|
||||
|
|
|
|||
|
|
@ -7,49 +7,58 @@ import { cn } from "@app/lib/cn"
|
|||
|
||||
const Tabs = TabsPrimitive.Root
|
||||
|
||||
const TabsList = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.List>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.List
|
||||
const TabsList = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.List>>;
|
||||
}
|
||||
) => (<TabsPrimitive.List
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TabsList.displayName = TabsPrimitive.List.displayName
|
||||
|
||||
const TabsTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Trigger
|
||||
const TabsTrigger = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Trigger>>;
|
||||
}
|
||||
) => (<TabsPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
|
||||
|
||||
const TabsContent = React.forwardRef<
|
||||
React.ElementRef<typeof TabsPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<TabsPrimitive.Content
|
||||
const TabsContent = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof TabsPrimitive.Content>>;
|
||||
}
|
||||
) => (<TabsPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"mt-6 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
TabsContent.displayName = TabsPrimitive.Content.displayName
|
||||
|
||||
export { Tabs, TabsList, TabsTrigger, TabsContent }
|
||||
|
|
|
|||
|
|
@ -5,8 +5,15 @@ import { cn } from "@app/lib/cn"
|
|||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
({ className, ...props }, ref) => {
|
||||
const Textarea = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: TextareaProps & {
|
||||
ref: React.RefObject<HTMLTextAreaElement>;
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
|
|
@ -17,8 +24,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
Textarea.displayName = "Textarea"
|
||||
|
||||
export { Textarea }
|
||||
|
|
|
|||
|
|
@ -9,19 +9,22 @@ import { cn } from "@app/lib/cn"
|
|||
|
||||
const ToastProvider = ToastPrimitives.Provider
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
const ToastViewport = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Viewport>>;
|
||||
}
|
||||
) => (<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName
|
||||
|
||||
const toastVariants = cva(
|
||||
|
|
@ -40,11 +43,14 @@ const toastVariants = cva(
|
|||
}
|
||||
)
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
const Toast = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}
|
||||
) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
|
|
@ -52,29 +58,36 @@ const Toast = React.forwardRef<
|
|||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
Toast.displayName = ToastPrimitives.Root.displayName
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
const ToastAction = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Action>>;
|
||||
}
|
||||
) => (<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
const ToastClose = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Close>>;
|
||||
}
|
||||
) => (<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
|
||||
|
|
@ -82,34 +95,39 @@ const ToastClose = React.forwardRef<
|
|||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
))
|
||||
</ToastPrimitives.Close>)
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
const ToastTitle = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Title>>;
|
||||
}
|
||||
) => (<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
const ToastDescription = (
|
||||
{
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> & {
|
||||
ref: React.RefObject<React.ElementRef<typeof ToastPrimitives.Description>>;
|
||||
}
|
||||
) => (<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
/>)
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue