@hunterchen/canvas 0.1.0

package/src/components/canvas/wrapper.tsx

@@ -0,0 +1,219 @@
+import { motion, type MotionValue, type Transition, useMotionValue } from "framer-motion";
+import { useState, useEffect, useRef, type ReactNode } from "react";
+import Image from "next/image";
+import {
+  MAX_DIM_RATIO,
+  GROW_TRANSITION,
+  BLUR_TRANSITION,
+  INTRO_ASPECT_RATIO,
+} from "../../lib/constants";
+
+// Re-export for backward compatibility
+export { GROW_TRANSITION as growTransition } from "../../lib/constants";
+
+interface CanvasWrapperProps {
+  children: React.ReactNode;
+  /** Shared progress MV (0->1) for the grow animation */
+  introProgress: MotionValue<number>;
+  /** Callback when the grow (stage1) completes */
+  onIntroGrowComplete?: () => void;
+
+  // ============== Intro Customization ==============
+  /** Disable intro animation entirely (starts at full size) */
+  skipIntro?: boolean;
+  /** Custom intro content to show during loading */
+  introContent?: ReactNode;
+  /** Custom loading text (default: "LOADING CANVAS") */
+  loadingText?: string;
+  /** Background gradient for intro screen */
+  introBackgroundGradient?: string;
+  /** Canvas box gradient for blur mask */
+  canvasBoxGradient?: string;
+  /** Grow animation transition config */
+  growTransition?: Transition;
+  /** Blur animation transition config */
+  blurTransition?: Transition;
+}
+
+/**
+ * Default intro content (Hack Western branding)
+ * Positioned in the upper third of the screen
+ */
+const DefaultIntroContent = () => (
+  <div className="absolute left-1/2 top-24 flex -translate-x-1/2 flex-col items-center text-center">
+    <Image
+      src="/horse.svg"
+      alt="Hack Western Logo"
+      width={64}
+      height={64}
+      className="mb-4"
+    />
+    <div className="font-jetbrains-mono font-semibold text-[#543C5AB2]">
+      HACK WESTERN 12
+    </div>
+  </div>
+);
+
+export const CanvasWrapper = ({
+  children,
+  introProgress,
+  onIntroGrowComplete,
+  skipIntro = false,
+  introContent,
+  loadingText = "LOADING CANVAS",
+  introBackgroundGradient = "linear-gradient(to top, #FEB6AF 0%, var(--salmon) 15%, var(--beige) 50%)",
+  canvasBoxGradient = "radial-gradient(130.38% 95% at 50.03% 97.25%, #EFB8A0 0%, #EAD2DF 48.09%, #EFE3E1 100%)",
+  growTransition = GROW_TRANSITION,
+  blurTransition = BLUR_TRANSITION,
+}: CanvasWrapperProps) => {
+  const [dimensions, setDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  const [dots, setDots] = useState<string>("..");
+  const [stage1NotFinished, setStage1NotFinished] = useState(true);
+  const completedRef = useRef(false);
+
+  // If skipIntro is true, immediately complete the intro
+  useEffect(() => {
+    if (skipIntro && !completedRef.current) {
+      completedRef.current = true;
+      introProgress.set(1);
+      onIntroGrowComplete?.();
+    }
+  }, [skipIntro, introProgress, onIntroGrowComplete]);
+
+  // add up to 4 dots, then go back down to 2
+  useEffect(() => {
+    if (skipIntro) return; // Don't animate dots if skipping intro
+
+    const interval = setInterval(() => {
+      setDots((prevDots) => {
+        if (prevDots.length < 3) {
+          return prevDots + ".";
+        } else {
+          return ".";
+        }
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, [skipIntro]);
+
+  useEffect(() => {
+    if (skipIntro) return; // Don't calculate dimensions if skipping intro
+
+    // calculate the initial 3:2 box size with margins (client-only)
+    const calculateInitialSize = () => {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      const maxWidth = vw * MAX_DIM_RATIO.width;
+      const maxHeight = vh * MAX_DIM_RATIO.height;
+
+      // width or height as limiter
+      if (maxWidth / INTRO_ASPECT_RATIO <= maxHeight) {
+        return { width: maxWidth, height: maxWidth / INTRO_ASPECT_RATIO };
+      } else {
+        return { height: maxHeight, width: maxHeight * INTRO_ASPECT_RATIO };
+      }
+    };
+
+    setDimensions(calculateInitialSize());
+  }, [skipIntro]);
+
+  // If skipIntro, render children directly without animation wrapper
+  if (skipIntro) {
+    return (
+      <motion.div
+        className="fixed inset-0 overflow-hidden"
+        style={{
+          touchAction: "none",
+          userSelect: "none",
+          pointerEvents: "none",
+        }}
+        onContextMenu={(e) => e.preventDefault()}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="fixed inset-0 overflow-hidden"
+      style={{
+        backgroundImage: stage1NotFinished ? introBackgroundGradient : undefined,
+        touchAction: "none",
+        userSelect: "none",
+        pointerEvents: "none",
+      }}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      {stage1NotFinished && (
+        <>
+          {/* Render custom intro content or default */}
+          {introContent !== undefined ? introContent : <DefaultIntroContent />}
+        </>
+      )}
+
+      {dimensions && (
+        <>
+          {/* Blurring mask box */}
+          <motion.div
+            initial={{
+              width: dimensions.width,
+              height: dimensions.height,
+              opacity: 1,
+              backgroundImage: canvasBoxGradient,
+            }}
+            animate={{
+              opacity: 0,
+              display: "none",
+            }}
+            transition={blurTransition}
+            className="absolute left-1/2 top-1/2 z-20 origin-center -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg"
+          />
+          {/* Growing wrapper drives introProgress */}
+          <motion.div
+            initial={{
+              width: dimensions.width,
+              height: dimensions.height,
+            }}
+            animate={{
+              width: "100vw",
+              height: "100vh",
+            }}
+            transition={growTransition}
+            onUpdate={(latest: { width?: number; height?: number }) => {
+              if (completedRef.current) return;
+              if (typeof latest.width === "number") {
+                const w0 = dimensions.width;
+                const w1 = window.innerWidth;
+                const progress =
+                  w1 === w0 ? 1 : (latest.width - w0) / (w1 - w0);
+                const clamped = Math.min(Math.max(progress, 0), 1);
+                introProgress.set(clamped);
+              }
+            }}
+            onAnimationComplete={() => {
+              if (!completedRef.current) {
+                completedRef.current = true;
+                introProgress.set(1);
+                setStage1NotFinished(false);
+                onIntroGrowComplete?.();
+              }
+            }}
+            className="absolute left-1/2 top-1/2 z-10 origin-center -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg shadow-[0_20px_40px_rgba(103,86,86,0.15)]"
+          >
+            <div className="h-full w-full">{children}</div>
+          </motion.div>
+        </>
+      )}
+      {stage1NotFinished && loadingText && (
+        <div className="absolute bottom-24 left-1/2 -translate-x-1/2 text-center font-jetbrains-mono font-semibold text-[#543C5AB2]">
+          {loadingText}{dots}
+        </div>
+      )}
+    </motion.div>
+  );
+};

package/src/components/ui/FolderIcon.tsx

@@ -0,0 +1,116 @@
+import { motion } from "framer-motion";
+import useWindowDimensions from "../../hooks/useWindowDimensions";
+
+type FolderIconProps = {
+  className?: string;
+  gradientId?: string;
+  strokeColor?: string;
+  isOpen?: boolean;
+};
+
+const AnimatedFolderIcon = ({
+  className = "",
+  gradientId = "defaultGradient",
+  strokeColor = "rgba(119, 103, 128, 0.1)",
+  isOpen = false,
+}: FolderIconProps) => {
+  const { width } = useWindowDimensions();
+
+  return (
+    <svg
+      viewBox="0 0 208 163"
+      className={className}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g filter="url(#folderShadow)">
+        {/* Closed Folder */}
+        <motion.g
+          initial={false}
+          animate={{
+            opacity: !isOpen || width < 640 ? 1 : 0,
+            scale: isOpen ? 1 : 1,
+            y: isOpen ? 5 : 0,
+            x: isOpen ? 15 : 15,
+          }}
+          transition={{
+            duration: 0.2,
+            ease: "easeInOut",
+          }}
+        >
+          <path
+            d="M4.34444 14.3331C4.1561 8.68286 8.68546 4 14.3389 4L76.1646 4C80.3832 4 84.4311 5.66604 87.4274 8.63558L98.3226 19.4333C101.319 22.4028 105.367 24.0689 109.585 24.0689H173.601C179.277 24.0689 183.815 28.7881 183.593 34.4601L179.876 129.391C179.666 134.758 175.255 139 169.884 139H18.1722C12.7791 139 8.35744 134.723 8.17777 129.333L4.34444 14.3331Z"
+            fill={`url(#${gradientId})`}
+            stroke={strokeColor}
+            strokeWidth="0.75"
+            fillOpacity={width < 640 ? "1" : "0.8"}
+          />
+        </motion.g>
+
+        {/* Open Folder */}
+        <motion.g
+          initial={false}
+          animate={{
+            opacity: isOpen ? 1 : 0,
+            scale: isOpen ? 1.15 : 1.15,
+            y: isOpen ? 20 : 20,
+            x: isOpen ? 23 : 23,
+          }}
+          transition={{
+            duration: 0.2,
+            ease: "easeInOut",
+          }}
+        >
+          <path
+            d="M3.72714 12.7562C3.28295 7.78306 7.20051 3.5 12.1934 3.5L67.2044 3.5C70.2086 3.5 73.1283 4.49474 75.5076 6.32893L89.3807 17.0235C91.76 18.8577 94.6797 19.8524 97.6839 19.8524H154.462C159.507 19.8524 163.442 24.2216 162.916 29.2393L154.874 105.887C154.42 110.214 150.772 113.5 146.421 113.5H20.5C16.0986 113.5 12.4253 110.14 12.0337 105.756L3.72714 12.7562Z"
+            fill={`url(#${gradientId})`}
+            stroke={strokeColor}
+            strokeOpacity="1"
+            strokeWidth="0.85"
+            fillOpacity="1"
+          />
+        </motion.g>
+      </g>
+      <defs>
+        <linearGradient id="red" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="rgba(226, 141, 159, 1)" />
+          <stop offset="100%" stopColor="rgba(244, 193, 204, 1)" />
+        </linearGradient>
+        <linearGradient id="blue" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="rgba(90, 149, 208, 1)" />
+          <stop offset="100%" stopColor="rgba(158, 202, 246, 1)" />
+        </linearGradient>
+        <linearGradient id="green" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="rgba(127, 202, 132, 1)" />
+          <stop offset="100%" stopColor="rgba(185, 227, 188, 1)" />
+        </linearGradient>
+        <linearGradient id="purple" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="rgba(143, 87, 173, 1)" />
+          <stop offset="100%" stopColor="rgba(209, 154, 238, 1)" />
+        </linearGradient>
+        <linearGradient id="orange" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="rgba(233, 148, 111, 1)" />
+          <stop offset="100%" stopColor="rgba(246, 185, 158, 1)" />
+        </linearGradient>
+
+        <filter
+          id="folderShadow"
+          x="-10"
+          y="-10"
+          width="208"
+          height="163"
+          filterUnits="userSpaceOnUse"
+        >
+          <feDropShadow
+            dx="0"
+            dy="0"
+            stdDeviation="3"
+            floodColor="rgba(119, 115, 149, 0.35)"
+          />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+
+export default AnimatedFolderIcon;

package/src/components/ui/button.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import Image from "next/image";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonBase =
+  "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-white font-figtree cursor-pointer";
+
+const lift =
+  "-translate-y-[3px] group-hover:-translate-y-[4px] group-active:-translate-y-[1px] transition-all duration-100";
+
+export const buttonVariants = cva(buttonBase, {
+  variants: {
+    variant: {
+      default: "",
+      primary: cn(
+        "bg-button-primary shadow-button-primary hover:bg-button-primary-hover active:bg-button-primary-active",
+        lift,
+      ),
+      secondary: cn(
+        "text-[#625679] bg-button-secondary hover:bg-button-secondary-hover active:bg-button-secondary-active active:shadow-button-secondary",
+        lift,
+      ),
+      tertiary: "bg-transparent text-[#625679] px-4 active:text-[#8F57AD]",
+      "tertiary-arrow":
+        "bg-transparent text-[#625679] px-4 active:text-[#8F57AD] flex items-center gap-2",
+      destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive-dark",
+      outline: "bg-violet-100 hover:bg-muted border border-[1px] border-muted",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline",
+      "apply-ghost":
+        "bg-[#ebdff7] bg-opacity-50 text-heavy font-semibold hover:bg-[#e6cdff] w-full justify-start",
+      apply: "text-medium hover:bg-[#ebdff7] hover:text-heavy",
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-8 rounded-md px-3",
+      lg: "h-11 rounded-md px-8",
+      icon: "h-10 w-10",
+    },
+  },
+  defaultVariants: { variant: "default", size: "default" },
+});
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  isPending?: boolean;
+  full?: boolean;
+  secondClass?: string;
+}
+
+const overlays = {
+  primary: { bg: "bg-button-primary-back", border: "border border-white/30" },
+  secondary: {
+    bg: "bg-button-secondary-back",
+    border: "border border-white/50",
+  },
+} as const;
+
+const pressedByVariant: Record<"primary" | "secondary", string> = {
+  primary:
+    "!-translate-y-[1px] shadow-none bg-button-primary-active hover:!bg-button-primary-active",
+  secondary:
+    "!-translate-y-[1px] shadow-button-secondary bg-button-secondary-active hover:!bg-button-secondary-active",
+};
+
+const noLift =
+  "group-hover:!translate-y-[1px] group-active:!translate-y-[1px] transition-none";
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "default",
+      size,
+      isPending = false,
+      full = false,
+      asChild = false,
+      disabled,
+      secondClass = "",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    const lockPressed =
+      isPending && (variant === "primary" || variant === "secondary");
+
+    const btnClasses = cn(
+      buttonVariants({ variant, size, className }),
+      lockPressed && [pressedByVariant[variant], noLift],
+      full && "w-full",
+    );
+
+    const overlay = overlays[variant as keyof typeof overlays];
+
+    const wrapperClasses = cn(
+      "group relative inline-block w-max",
+      full && "block w-full",
+      lockPressed && ["pointer-events-none", noLift],
+    );
+
+    return (
+      <div className={wrapperClasses}>
+        {overlay && (
+          <>
+            <span
+              className={cn(
+                "pointer-events-none absolute inset-0 h-full w-full rounded-lg",
+                overlay.bg,
+              )}
+            />
+            <span
+              className={cn(
+                "pointer-events-none absolute inset-0 z-50 h-full w-full rounded-lg",
+                overlay.border,
+                lockPressed ? "-translate-y-[1px] " + noLift : lift,
+              )}
+            />
+          </>
+        )}
+
+        <Comp
+          ref={ref}
+          {...props}
+          className={cn("flex flex-row gap-2", btnClasses)}
+          disabled={disabled ?? isPending}
+        >
+          {variant === "tertiary-arrow" ? (
+            <div className="w-full">
+              <Image
+                src="/arrow-left.svg"
+                alt="Left Arrow"
+                width={10}
+                height={10}
+              />
+              {children}
+            </div>
+          ) : (
+            children
+          )}
+        </Comp>
+
+        {(variant === "tertiary" || variant === "tertiary-arrow") && (
+          <span
+            className={cn(
+              "block h-0 max-w-0 border-b-2 border-dashed border-[#625679] transition-all duration-200 group-hover:max-w-full group-active:border-[#8F57AD]",
+              secondClass,
+            )}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const labelVariants = cva(
+  "text-[#5f476c] text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/ui/toast.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed left-1/2 top-4 z-[100] flex max-h-screen w-auto -translate-x-1/2 flex-col p-4 sm:max-w-fit",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-auto min-w-fit items-center justify-between space-x-4 overflow-hidden rounded-md border px-4 py-3 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-top-full data-[state=open]:slide-in-from-top-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success: "border-green-200 bg-green-50 text-green-900 shadow-lg",
+        cute: cn(
+          "border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50 text-purple-900 shadow-lg rounded-lg", // Base styling
+          "w-[calc(100vw-4rem)]", // Mobile: take (100vw - 4rem) width for near full-bleed with margin
+          "mx-auto", // Center it (viewport already centers, but keep safety)
+          "min-w-0", // Prevent it from shrinking too small if content wraps
+          "sm:w-auto", // On larger screens revert to intrinsic sizing
+          "justify-center text-center space-x-0", // Center content & text horizontally
+        ),
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+  VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground 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",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-3 w-3" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

package/src/components/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import { useToast } from "../../hooks/use-toast";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}