CoolFace
Apppublic

WaledRashed24/comics

sourceHugging Faceupdated 2y agoView on Hugging Face
0likes
toast.tsx128 linesDownload Raw Back to ui
1import * as React from "react"2import * as ToastPrimitives from "@radix-ui/react-toast"3import { cva, type VariantProps } from "class-variance-authority"4import { X } from "lucide-react"5 6import { cn } from "@/lib/utils"7 8const ToastProvider = ToastPrimitives.Provider9 10const ToastViewport = React.forwardRef<11  React.ElementRef<typeof ToastPrimitives.Viewport>,12  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>13>(({ className, ...props }, ref) => (14  <ToastPrimitives.Viewport15    ref={ref}16    className={cn(17      "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]",18      className19    )}20    {...props}21  />22))23ToastViewport.displayName = ToastPrimitives.Viewport.displayName24 25const toastVariants = cva(26  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border border-stone-200 p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full dark:border-stone-800",27  {28    variants: {29      variant: {30        default: "border bg-white text-stone-950 dark:bg-stone-950 dark:text-stone-50",31        destructive:32          "destructive group border-red-500 bg-red-500 text-stone-50 dark:border-red-900 dark:bg-red-900 dark:text-stone-50",33      },34    },35    defaultVariants: {36      variant: "default",37    },38  }39)40 41const Toast = React.forwardRef<42  React.ElementRef<typeof ToastPrimitives.Root>,43  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &44    VariantProps<typeof toastVariants>45>(({ className, variant, ...props }, ref) => {46  return (47    <ToastPrimitives.Root48      ref={ref}49      className={cn(toastVariants({ variant }), className)}50      {...props}51    />52  )53})54Toast.displayName = ToastPrimitives.Root.displayName55 56const ToastAction = React.forwardRef<57  React.ElementRef<typeof ToastPrimitives.Action>,58  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>59>(({ className, ...props }, ref) => (60  <ToastPrimitives.Action61    ref={ref}62    className={cn(63      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-stone-200 bg-transparent px-3 text-sm font-medium ring-offset-white transition-colors hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-950 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-stone-100/40 group-[.destructive]:hover:border-red-500/30 group-[.destructive]:hover:bg-red-500 group-[.destructive]:hover:text-stone-50 group-[.destructive]:focus:ring-red-500 dark:border-stone-800 dark:ring-offset-stone-950 dark:hover:bg-stone-800 dark:focus:ring-stone-300 dark:group-[.destructive]:border-stone-800/40 dark:group-[.destructive]:hover:border-red-900/30 dark:group-[.destructive]:hover:bg-red-900 dark:group-[.destructive]:hover:text-stone-50 dark:group-[.destructive]:focus:ring-red-900",64      className65    )}66    {...props}67  />68))69ToastAction.displayName = ToastPrimitives.Action.displayName70 71const ToastClose = React.forwardRef<72  React.ElementRef<typeof ToastPrimitives.Close>,73  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>74>(({ className, ...props }, ref) => (75  <ToastPrimitives.Close76    ref={ref}77    className={cn(78      "absolute right-2 top-2 rounded-md p-1 text-stone-950/50 opacity-0 transition-opacity hover:text-stone-950 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-stone-50/50 dark:hover:text-stone-50",79      className80    )}81    toast-close=""82    {...props}83  >84    <X className="h-4 w-4" />85  </ToastPrimitives.Close>86))87ToastClose.displayName = ToastPrimitives.Close.displayName88 89const ToastTitle = React.forwardRef<90  React.ElementRef<typeof ToastPrimitives.Title>,91  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>92>(({ className, ...props }, ref) => (93  <ToastPrimitives.Title94    ref={ref}95    className={cn("text-sm font-semibold", className)}96    {...props}97  />98))99ToastTitle.displayName = ToastPrimitives.Title.displayName100 101const ToastDescription = React.forwardRef<102  React.ElementRef<typeof ToastPrimitives.Description>,103  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>104>(({ className, ...props }, ref) => (105  <ToastPrimitives.Description106    ref={ref}107    className={cn("text-sm opacity-90", className)}108    {...props}109  />110))111ToastDescription.displayName = ToastPrimitives.Description.displayName112 113type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>114 115type ToastActionElement = React.ReactElement<typeof ToastAction>116 117export {118  type ToastProps,119  type ToastActionElement,120  ToastProvider,121  ToastViewport,122  Toast,123  ToastTitle,124  ToastDescription,125  ToastClose,126  ToastAction,127}128