pejay-ui 1.3.5 → 1.4.0

package/registry/toast.json

@@ -0,0 +1,10 @@
+{
+  "toast": {
+    "name": "Toast",
+    "category": "toast",
+    "files": ["templates/toast"],
+    "utils": ["cn.ts"],
+    "dependencies": ["overlays/portal"],
+    "peerDependencies": ["clsx", "tailwind-merge", "lucide-react"]
+  }
+}

package/templates/overlays/index.ts

@@ -0,0 +1 @@
+export * from "./portal";

package/templates/overlays/portal.tsx

@@ -0,0 +1,26 @@
+import { createPortal } from "react-dom";
+import { useEffect, useState, type ReactNode } from "react";
+
+interface PortalProps {
+  children: ReactNode;
+}
+export function Portal({ children }: PortalProps) {
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const div = document.createElement("div");
+    div.id = "dynamic-portal";
+    document.body.appendChild(div);
+    setContainer(div);
+
+    return () => {
+      if (div.parentNode) {
+        document.body.removeChild(div);
+      }
+    };
+  }, []);
+
+  if (!container) return null;
+
+  return createPortal(children, container);
+}

package/templates/toast/README.md

@@ -0,0 +1,183 @@
+# Toast Notification Component
+
+A toast notification system featuring:
+- **Fully Customizable Styling**: Complete visual control over status designs.
+- **Interactive Gestures**: Swipe-to-dismiss drag support for touch and pointer events.
+- **Built-in Theme Presets**: Ready-to-use themes for Success, Error, Warning, and Info alerts.
+- **Smart Timers**: Auto-dismiss timers that pause when the user hovers over a toast.
+- **Custom Rendering**: Bypasses the default style to render custom React components and functions.
+- **Transitions**: Smooth entry/exit animations (slide and fade transitions).
+
+---
+
+## 1. Setup
+
+To use the toast notification system, place the `<ToastContainer />` at the root of your application (typically in `App.tsx` or `main.tsx`).
+
+```tsx
+import { ToastContainer } from "@/pejay-ui/components/toast";
+
+export default function App() {
+  return (
+    <>
+      {/* Your App Routing/Content */}
+      <ToastContainer placement="top-right" animationType="fade" />
+    </>
+  );
+}
+```
+
+### `<ToastContainer />` Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `placement` | `"top-right" \| "top-left" \| "bottom-right" \| "bottom-left"` | `"top-right"` | The screen corner where notifications will stack. |
+| `animationType` | `"fade" \| "slide"` | `"fade"` | The entrance and exit transition animation style. Can also be passed as `animation-type`. |
+
+---
+
+## 2. Usage & API
+
+Import the `toast` function from the module:
+```ts
+import { toast } from "@/pejay-ui/components/toast";
+```
+
+### Call Signatures
+
+The status methods (`success`, `error`, `warning`, `info`) support two call signatures:
+
+#### 1. Quick Message (String Only)
+For displaying a single-line text message with default settings:
+```ts
+toast.success("All changes saved!");
+```
+You can also pass an optional configuration object as the second argument:
+```ts
+toast.error("An error occurred", { duration: 5000, showClose: false });
+```
+
+#### 2. Detailed Object Configuration
+For full title and description control:
+```ts
+toast.warning({
+  title: "Low Disk Space",
+  description: "You have less than 10% space remaining.",
+  duration: 6000
+});
+```
+
+---
+
+### Shared Configuration Options (`ToastOptions`)
+All toast methods accept an options object:
+
+| Option | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | — | Bold title text displayed in the toast. |
+| `description` | `string` | — | Smaller detail text under the title. |
+| `duration` | `number` | `4000` | Lifetime in milliseconds. Pass `Infinity` to disable auto-closing. |
+| `showClose` | `boolean` | `true` | Whether to show the close cross button. |
+| `dismiss` | `string` | — | An existing toast ID to dismiss before showing the new one. |
+| `icon` | `React.ReactNode` | — | Custom React element to override the default status icon. |
+
+---
+
+## 3. Presets & Examples
+
+### A. Success Toast
+Use for successful operations (submitting forms, saves, payments).
+```ts
+toast.success({
+  title: "Payment Received",
+  description: "Your invoice #2093 has been paid successfully.",
+  duration: 4000,
+});
+```
+
+### B. Error Toast
+Use for failed requests, validation errors, or application crashes.
+```ts
+toast.error({
+  title: "Upload Failed",
+  description: "The connection was lost. Please check your network and try again.",
+  duration: 6000,
+  showClose: true,
+});
+```
+
+### C. Warning Toast
+Use for alerts, soft errors, or actions requiring user attention.
+```ts
+toast.warning({
+  title: "Unsaved Changes",
+  description: "Your work will be lost if you navigate away.",
+  duration: 5000,
+});
+```
+
+### D. Info Toast
+Use for general system notices or status updates.
+```ts
+toast.info({
+  title: "System Maintenance",
+  description: "Scheduled maintenance will begin tonight at 12:00 AM EST.",
+  duration: Infinity, // Stays visible until manually closed
+});
+```
+
+---
+
+## 4. Custom Toasts
+
+For completely custom designs, use `toast.custom()`. This method bypasses default styling and allows you to render any React component. 
+
+### Custom Example with Manual Dismissal
+You can pass a function to the `content` property. It receives the unique `id` of the toast, allowing you to trigger a manual dismiss from inside your custom UI:
+
+```tsx
+toast.custom({
+  id: "my-custom-toast", // Optional custom string ID
+  duration: 10000,       // 10 seconds
+  content: (id) => (
+    <div className="flex flex-col gap-3 p-4 w-full bg-slate-900 border border-violet-500/30 rounded-xl shadow-lg">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm font-semibold text-white">Importing Contacts</h4>
+        <p className="text-xs text-slate-400">Please wait while we process your file.</p>
+      </div>
+      <div className="flex gap-2 justify-end">
+        <button
+          onClick={() => toast.dismiss(id)}
+          className="px-3 py-1 bg-violet-600 hover:bg-violet-700 text-xs font-semibold text-white rounded-md transition-colors"
+        >
+          Cancel Import
+        </button>
+      </div>
+    </div>
+  )
+});
+```
+
+## 5. Dismissing Toasts
+
+Toasts can be dismissed programmatically in two ways:
+
+### 1. By ID via `toast.dismiss()`
+You can manually trigger the removal of a toast at any time by calling `toast.dismiss(id)` with the ID returned when the toast was created:
+```ts
+// Trigger the toast and capture its generated ID
+const toastId = toast.info("Uploading file...", { duration: Infinity });
+
+// Dismiss it later (e.g. once the file upload succeeds)
+toast.dismiss(toastId);
+```
+
+### 2. Auto-Dismissing when Triggering a New Toast (via `dismiss` option)
+You can automatically dismiss an active toast by passing its ID in the `dismiss` option of a new toast. This is useful for transitioning states (e.g., from a loading state to a success/error state):
+```ts
+// 1. Show loading toast with a fixed ID
+toast.info("Saving changes...", { id: "saving-progress" });
+
+// 2. Trigger success toast, which dismisses "saving-progress" before rendering
+toast.success("All changes saved!", { dismiss: "saving-progress" });
+```

package/templates/toast/container.tsx

@@ -0,0 +1,320 @@
+import { useEffect, useState, useRef } from "react";
+import type { ToastData } from "./types";
+import { toastStore } from "./store";
+import {
+  CheckCircle,
+  AlertCircle,
+  AlertTriangle,
+  Info,
+  X,
+} from "lucide-react";
+import { cn } from "@/utils/cn";
+import { Portal } from "../overlays";
+
+// Dictionary mapping toast types to their respective Lucide icons and Tailwind styles
+const TOAST_STYLES = {
+  success: {
+    Icon: CheckCircle,
+    iconColor: "text-emerald-500",
+    borderColor: "border-emerald-500/20",
+    bgGlow: "shadow-emerald-500/5",
+    accentColor: "bg-emerald-500",
+  },
+  error: {
+    Icon: AlertCircle,
+    iconColor: "text-red-500",
+    borderColor: "border-red-500/20",
+    bgGlow: "shadow-red-500/5",
+    accentColor: "bg-red-500",
+  },
+  warning: {
+    Icon: AlertTriangle,
+    iconColor: "text-amber-500",
+    borderColor: "border-amber-500/20",
+    bgGlow: "shadow-amber-500/5",
+    accentColor: "bg-amber-500",
+  },
+  info: {
+    Icon: Info,
+    iconColor: "text-sky-500",
+    borderColor: "border-sky-500/20",
+    bgGlow: "shadow-sky-500/5",
+    accentColor: "bg-sky-500",
+  },
+} as const;
+
+function ToastItem({
+  toast,
+  placement = "top-right",
+  animationType = "fade",
+}: {
+  toast: ToastData;
+  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  animationType?: "slide" | "fade";
+}) {
+  const [dragOffset, setDragOffset] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isDismissing, setIsDismissing] = useState(false);
+  const [animateState, setAnimateState] = useState(false);
+  
+  const startXRef = useRef(0);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isHoveringRef = useRef(false);
+
+  const isLeft = placement.endsWith("-left");
+  const slideOffset = isLeft ? -500 : 500;
+
+  // Helper to trigger the exit animation and remove toast from store after transition
+  const triggerDismiss = (customOffset?: number) => {
+    setIsDismissing(true);
+    if (customOffset !== undefined) {
+      setDragOffset(customOffset);
+    }
+    setTimeout(() => {
+      toastStore.remove(toast.id);
+    }, 400);
+  };
+
+  const startTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (isHoveringRef.current) return;
+    const duration = toast.duration ?? 4000;
+    if (duration === Infinity) return;
+    timerRef.current = setTimeout(() => {
+      triggerDismiss();
+    }, duration);
+  };
+
+  const stopTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    startTimer();
+    return () => stopTimer();
+  }, [toast.id, toast.duration]);
+
+  // Use requestAnimationFrame to guarantee the browser registers the initial off-screen paint before triggering the transition
+  useEffect(() => {
+    let frame1: number;
+    let frame2: number;
+    frame1 = requestAnimationFrame(() => {
+      frame2 = requestAnimationFrame(() => {
+        setAnimateState(true);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(frame1);
+      if (frame2) cancelAnimationFrame(frame2);
+    };
+  }, []);
+
+  const handleMouseEnter = () => {
+    isHoveringRef.current = true;
+    stopTimer();
+  };
+
+  const handleMouseLeave = () => {
+    isHoveringRef.current = false;
+    startTimer();
+  };
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (isDismissing) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+
+    // Prevent dragging when clicking interactive elements (buttons, inputs, links, etc.)
+    const target = e.target as HTMLElement;
+    if (target.closest("button, input, select, textarea, a")) return;
+
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+    stopTimer();
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDragging) return;
+    const offset = e.clientX - startXRef.current;
+    setDragOffset(offset);
+  };
+
+  const handlePointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    e.currentTarget.releasePointerCapture(e.pointerId);
+
+    // Dismiss toast if dragged beyond threshold, otherwise snap back
+    if (Math.abs(dragOffset) > 100) {
+      triggerDismiss(dragOffset > 0 ? 500 : -500);
+    } else {
+      setDragOffset(0);
+      startTimer();
+    }
+  };
+
+  // Determine transition styles based on active animation option
+  const opacity = Math.max(0, 1 - Math.abs(dragOffset) / 300);
+
+  const opacityStyle = animationType === "slide"
+    ? (isDragging ? opacity : 1)
+    : (isDismissing || !animateState ? 0 : opacity);
+
+  const transformStyle = animationType === "slide"
+    ? (isDismissing
+        ? `translate3d(${dragOffset === 0 ? slideOffset : (dragOffset > 0 ? 500 : -500)}px, 0, 0)`
+        : (!animateState ? `translate3d(${slideOffset}px, 0, 0)` : `translate3d(${dragOffset}px, 0, 0)`))
+    : `translate3d(${dragOffset}px, 0, 0)`;
+
+  const itemStyle = {
+    transform: transformStyle,
+    opacity: opacityStyle,
+    touchAction: "none" as const,
+    willChange: "transform, opacity",
+    transition: isDragging
+      ? "none"
+      : "transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease-in-out",
+  };
+
+  // Return custom component directly, avoiding standard layout properties
+  if (toast.type === "custom") {
+    return (
+      <div
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={itemStyle}
+        className={cn(
+          "relative overflow-hidden min-w-[320px] max-w-[400px] rounded-xl border backdrop-blur-md shadow-2xl flex items-start",
+          "select-none cursor-pointer active:cursor-grabbing",
+          "bg-gray-950/95 border-violet-500/20 shadow-violet-500/5",
+        )}
+      >
+        {typeof toast.content === "function" ? toast.content(toast.id!) : toast.content}
+      </div>
+    );
+  }
+
+  // Standard toast style configuration mapping
+  const typeKey = (toast.type && toast.type in TOAST_STYLES) ? (toast.type as keyof typeof TOAST_STYLES) : "info";
+  const { Icon, iconColor, borderColor, bgGlow, accentColor } = TOAST_STYLES[typeKey];
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerCancel={handlePointerUp}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      style={itemStyle}
+      className={cn(
+        "relative overflow-hidden min-w-[320px] max-w-[400px] rounded-xl border backdrop-blur-md p-4 shadow-2xl flex gap-3 items-start",
+        "select-none cursor-pointer active:cursor-grabbing",
+        "bg-gray-950/95",
+        borderColor,
+        bgGlow,
+      )}
+    >
+      {accentColor && (
+        <div
+          className={cn("absolute left-0 top-0 bottom-0 w-[3px]", accentColor)}
+        />
+      )}
+
+      {toast.icon ? (
+        <div className="shrink-0 mt-0.5 ml-1 pointer-events-none flex items-center justify-center">
+          {toast.icon}
+        </div>
+      ) : (
+        <Icon
+          className={cn("shrink-0 mt-0.5 ml-1 pointer-events-none", iconColor)}
+          size={18}
+        />
+      )}
+
+      <div className="flex-1 flex flex-col gap-0.5 pointer-events-none">
+        {toast.message && (
+          <p className="text-sm font-medium text-white leading-normal pr-4">
+            {toast.message}
+          </p>
+        )}
+        {toast.title && (
+          <h3
+            className="font-semibold text-sm tracking-tight leading-tight pr-4 text-white"
+          >
+            {toast.title}
+          </h3>
+        )}
+        {toast.description && (
+          <p
+            className="text-xs font-medium mt-1 leading-normal text-gray-400"
+          >
+            {toast.description}
+          </p>
+        )}
+      </div>
+
+      {toast.showClose && (
+        <button
+          onClick={e => {
+            e.stopPropagation();
+            triggerDismiss();
+          }}
+          className="text-gray-500 hover:text-white transition-colors p-1 rounded-md hover:bg-gray-900 shrink-0 relative z-10"
+        >
+          <X size={14} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ToastContainerProps {
+  placement?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  "animation-type"?: "slide" | "fade";
+  animationType?: "slide" | "fade";
+}
+
+export function ToastContainer({
+  placement = "top-right",
+  "animation-type": animationTypeHyphen,
+  animationType = animationTypeHyphen ?? "fade",
+}: ToastContainerProps) {
+  const [toasts, setToasts] = useState<ToastData[]>(toastStore.getToasts());
+
+  useEffect(() => {
+    const unsubscribe = toastStore.subscribe(setToasts);
+    return unsubscribe;
+  }, []);
+
+  const placementClasses = {
+    "top-right": "fixed top-4 right-4 flex-col",
+    "top-left": "fixed top-4 left-4 flex-col",
+    "bottom-right": "fixed bottom-4 right-4 flex-col-reverse",
+    "bottom-left": "fixed bottom-4 left-4 flex-col-reverse",
+  };
+
+  const containerClass = placementClasses[placement] || placementClasses["top-right"];
+
+  return (
+    <Portal>
+      <div className={cn("z-[9999] flex gap-3", containerClass)}>
+        {toasts.map(toast => (
+          <ToastItem
+            key={toast.id}
+            toast={toast}
+            placement={placement}
+            animationType={animationType}
+          />
+        ))}
+      </div>
+    </Portal>
+  );
+}

package/templates/toast/index.ts

@@ -0,0 +1,4 @@
+export * from "./container";
+export * from "./toast";
+export * from "./types";
+export * from "./store";

package/templates/toast/store.ts

@@ -0,0 +1,35 @@
+import type { Listener, ToastData } from "./types";
+
+class ToastStore {
+  private toasts: ToastData[] = [];
+  private listeners: Listener[] = [];
+
+  subscribe(listener: Listener) {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter((l) => l !== listener);
+    };
+  }
+  private publish() {
+    this.listeners.forEach((listener) => listener(this.toasts));
+  }
+  add(toast: ToastData) {
+    const newToast: ToastData = {
+      id: toast.id ?? crypto.randomUUID(),
+      ...toast,
+    };
+    this.toasts = [newToast, ...this.toasts];
+    this.publish();
+    return newToast.id!;
+  }
+  remove(id: string | undefined) {
+    this.toasts = this.toasts.filter((toast) => toast.id !== id);
+
+    this.publish();
+  }
+  getToasts() {
+    return this.toasts;
+  }
+}
+
+export const toastStore = new ToastStore();

package/templates/toast/toast.ts

@@ -0,0 +1,54 @@
+import { toastStore } from "./store";
+import type { ToastData } from "./types";
+
+type ToastOptions = ToastData;
+type ShortcutOptions = Omit<ToastData, "type">;
+
+function createToast(options: ToastOptions) {
+  if (options.dismiss) {
+    toastStore.remove(options.dismiss);
+  }
+  return toastStore.add(options);
+}
+
+const handleShortcut = (
+  type: ToastData["type"],
+  messageOrOptions: string | ShortcutOptions,
+  options?: ShortcutOptions
+) => {
+  if (typeof messageOrOptions === "string") {
+    return createToast({ message: messageOrOptions, ...options, type });
+  }
+  return createToast({ ...messageOrOptions, type });
+};
+
+export const toast = Object.assign(
+  (options: ToastOptions) => {
+    return createToast(options);
+  },
+  {
+    success: (messageOrOptions: string | ShortcutOptions, options?: ShortcutOptions) => {
+      return handleShortcut("success", messageOrOptions, options);
+    },
+
+    error: (messageOrOptions: string | ShortcutOptions, options?: ShortcutOptions) => {
+      return handleShortcut("error", messageOrOptions, options);
+    },
+
+    info: (messageOrOptions: string | ShortcutOptions, options?: ShortcutOptions) => {
+      return handleShortcut("info", messageOrOptions, options);
+    },
+
+    warning: (messageOrOptions: string | ShortcutOptions, options?: ShortcutOptions) => {
+      return handleShortcut("warning", messageOrOptions, options);
+    },
+
+    custom: (options: { content: React.ReactNode | ((id: string) => React.ReactNode); id?: string; duration?: number; dismiss?: string }) => {
+      return createToast({ ...options, type: "custom" });
+    },
+
+    dismiss: (id: string) => {
+      toastStore.remove(id);
+    },
+  },
+);

package/templates/toast/types.ts

@@ -0,0 +1,15 @@
+export type ToastType = "info" | "error" | "warning" | "success" | "custom";
+
+export type Listener = (toasts: ToastData[]) => void;
+export interface ToastData {
+  id?: string;
+  title?: string;
+  description?: string;
+  message?: string;
+  type?: ToastType;
+  duration?: number;
+  showClose?: boolean;
+  dismiss?: string;
+  icon?: React.ReactNode;
+  content?: React.ReactNode | ((id: string) => React.ReactNode);
+}