-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b33ac39
commit cad7fef
Showing
27 changed files
with
1,617 additions
and
547 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { forwardRef, type HTMLAttributes } from "react"; | ||
| import { cva, cx, type VariantProps } from "~/lib/utils"; | ||
|
|
||
| export const alertVariants = cva({ | ||
| base: "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", | ||
| variants: { | ||
| variant: { | ||
| default: "bg-background text-foreground", | ||
| destructive: | ||
| "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| }, | ||
| }); | ||
|
|
||
| export const Alert = forwardRef< | ||
| HTMLDivElement, | ||
| HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants> | ||
| >(({ className, variant, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| role="alert" | ||
| className={cx(alertVariants({ variant }), className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| Alert.displayName = "Alert"; | ||
|
|
||
| export const AlertTitle = forwardRef< | ||
| HTMLParagraphElement, | ||
| HTMLAttributes<HTMLHeadingElement> & { | ||
| asChild?: boolean; | ||
| } | ||
| >(({ className, asChild = false, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : "h5"; | ||
|
|
||
| return ( | ||
| <Comp | ||
| ref={ref} | ||
| className={cx("mb-1 font-medium leading-none tracking-tight", className)} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }); | ||
| AlertTitle.displayName = "AlertTitle"; | ||
|
|
||
| export const AlertDescription = forwardRef< | ||
| HTMLParagraphElement, | ||
| HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cx("text-sm [&_p]:leading-relaxed", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| AlertDescription.displayName = "AlertDescription"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
| import { Cross2Icon } from "@radix-ui/react-icons"; | ||
| import { | ||
| forwardRef, | ||
| type ComponentPropsWithoutRef, | ||
| type ElementRef, | ||
| type HTMLAttributes, | ||
| } from "react"; | ||
| import { cva, cx, type VariantProps } from "~/lib/utils"; | ||
|
|
||
| export const Sheet = SheetPrimitive.Root; | ||
|
|
||
| export const SheetTrigger = SheetPrimitive.Trigger; | ||
|
|
||
| export const SheetClose = SheetPrimitive.Close; | ||
|
|
||
| export const SheetPortal = SheetPrimitive.Portal; | ||
|
|
||
| export const SheetOverlay = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Overlay>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Overlay | ||
| ref={ref} | ||
| className={cx( | ||
| "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} | ||
| /> | ||
| )); | ||
| SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; | ||
|
|
||
| export const sheetVariants = cva({ | ||
| base: "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", | ||
| variants: { | ||
| side: { | ||
| top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", | ||
| bottom: | ||
| "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", | ||
| left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", | ||
| right: | ||
| "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| side: "right", | ||
| }, | ||
| }); | ||
|
|
||
| export const SheetContent = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Content>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Content> & | ||
| VariantProps<typeof sheetVariants> | ||
| >(({ side = "right", className, children, ...props }, ref) => ( | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| <SheetPrimitive.Content | ||
| ref={ref} | ||
| className={cx(sheetVariants({ side }), className)} | ||
| {...props} | ||
| > | ||
| <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary [&_svg]:size-4"> | ||
| <Cross2Icon aria-hidden /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| {children} | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| )); | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName; | ||
|
|
||
| export const SheetHeader = ({ | ||
| className, | ||
| ...props | ||
| }: HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cx("flex flex-col gap-y-2 text-center sm:text-left", className)} | ||
| {...props} | ||
| /> | ||
| ); | ||
| SheetHeader.displayName = "SheetHeader"; | ||
|
|
||
| export const SheetFooter = ({ | ||
| className, | ||
| ...props | ||
| }: HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cx( | ||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| SheetFooter.displayName = "SheetFooter"; | ||
|
|
||
| export const SheetTitle = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Title>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Title | ||
| ref={ref} | ||
| className={cx("text-lg font-semibold text-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SheetTitle.displayName = SheetPrimitive.Title.displayName; | ||
|
|
||
| export const SheetDescription = forwardRef< | ||
| ElementRef<typeof SheetPrimitive.Description>, | ||
| ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Description | ||
| ref={ref} | ||
| className={cx("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName; |
Oops, something went wrong.