@zentauri-ui/zentauri-components 1.3.0 → 1.4.0

package/src/ui/toast/animated/toast-animated.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { useContext } from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../../lib/utils";
+
+import { toastAnimationPresets } from "./animations";
+import type { ToastProps, ToastViewportProps } from "../types";
+import { toastRootVariants, toastViewportVariants } from "../variants";
+import {
+  ToastClose,
+  ToastDescription,
+  ToastStoreContext,
+  ToastTitle,
+} from "../toast-base";
+
+export function ToastViewportAnimated({
+  position = "bottom-right",
+  className,
+}: ToastViewportProps) {
+  const ctx = useContext(ToastStoreContext);
+  if (!ctx) {
+    throw new Error("ToastViewportAnimated must be used within <ToastProvider>");
+  }
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={cn(toastViewportVariants({ position }), className)}
+      data-slot="toast-viewport"
+    >
+      <AnimatePresence>
+        {ctx.toasts.map((item) => (
+          <ToastAnimated
+            key={item.id}
+            toastId={item.id}
+            appearance={item.appearance}
+            size={item.size}
+            animation={item.animation}
+          >
+            <ToastTitle>{item.title}</ToastTitle>
+            {item.description ? (
+              <ToastDescription>{item.description}</ToastDescription>
+            ) : null}
+            <ToastClose onClick={() => ctx.dismiss(item.id)} />
+          </ToastAnimated>
+        ))}
+      </AnimatePresence>
+    </div>,
+    portalTarget,
+  );
+}
+
+ToastViewportAnimated.displayName = "ToastViewport";
+
+export function ToastAnimated({
+  toastId: _toastId,
+  appearance,
+  size,
+  animation = "slide",
+  className,
+  children,
+}: ToastProps) {
+  const live = appearance === "error" ? "assertive" : "polite";
+
+  const motionProps = toastAnimationPresets[animation];
+
+  return (
+    <motion.div
+      layout
+      data-slot="toast"
+      role={appearance === "error" ? "alert" : "status"}
+      aria-live={live}
+      aria-atomic="true"
+      className={cn(
+        "relative",
+        toastRootVariants({ appearance, size }),
+        className,
+      )}
+      initial={animation === "none" ? false : motionProps.initial}
+      animate={animation === "none" ? undefined : motionProps.animate}
+      exit={animation === "none" ? undefined : motionProps.exit}
+      transition={motionProps.transition}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+ToastAnimated.displayName = "Toast";

package/src/ui/toast/animated/types.ts

@@ -0,0 +1,13 @@
+import { HTMLMotionProps } from "framer-motion";
+
+export type ToastAnimation = "none" | "slide" | "fade";
+
+export type ToastPresetMotionProps = Pick<
+  HTMLMotionProps<"div">,
+  "initial" | "animate" | "exit" | "transition"
+>;
+
+export type ToastAnimationPresets = Record<
+  ToastAnimation,
+  ToastPresetMotionProps
+>;  

package/src/ui/toast/index.ts

@@ -0,0 +1,26 @@
+"use client";
+
+export {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  toast,
+  useToast,
+} from "./toast";
+export type {
+  ToastAnimation,
+  ToastContextValue,
+  ToastInput,
+  ToastPosition,
+  ToastProps,
+  ToastProviderProps,
+  ToastSectionProps,
+  ToastViewportProps,
+  ToastRootVariantProps,
+  ToastViewportVariantProps,
+} from "./types";
+export { toastRootVariants, toastViewportVariants } from "./variants";

package/src/ui/toast/toast-base.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  ToastContextValue,
+  ToastStoreContextValue,
+  InternalToast,
+  ToastInput,
+  ToastProps,
+  ToastProviderProps,
+  ToastSectionProps,
+  ToastViewportProps,
+} from "./types";
+import { toastRootVariants, toastViewportVariants } from "./variants";
+
+export const ToastStoreContext = createContext<ToastStoreContextValue | null>(
+  null,
+);
+
+let toastDispatcher: ToastStoreContextValue["push"] | null = null;
+
+export function toast(input: ToastInput) {
+  if (!toastDispatcher) {
+    return "";
+  }
+  return toastDispatcher(input);
+}
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastStoreContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within <ToastProvider>");
+  }
+  return { toast: ctx.push, dismiss: ctx.dismiss };
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<InternalToast[]>([]);
+  const timers = useRef<Map<string, number>>(new Map());
+
+  const dismiss = useCallback((id: string) => {
+    const timerId = timers.current.get(id);
+    if (timerId) {
+      window.clearTimeout(timerId);
+      timers.current.delete(id);
+    }
+    setToasts((prev) => prev.filter((toastItem) => toastItem.id !== id));
+  }, []);
+
+  const push = useCallback(
+    (input: ToastInput) => {
+      const id = input.id ?? `toast-${Math.random().toString(16).slice(2)}`;
+      const durationMs = input.durationMs ?? 4500;
+      const record: InternalToast = {
+        ...input,
+        id,
+        durationMs,
+        animation: input.animation ?? "slide",
+      };
+      setToasts((prev) => [...prev, record]);
+      const timerId = window.setTimeout(() => dismiss(id), durationMs);
+      timers.current.set(id, timerId);
+      return id;
+    },
+    [dismiss],
+  );
+
+  const ctx = useMemo(
+    () => ({
+      toasts,
+      push,
+      dismiss,
+    }),
+    [dismiss, push, toasts],
+  );
+
+  useEffect(() => {
+    toastDispatcher = push;
+    return () => {
+      toastDispatcher = null;
+    };
+  }, [push]);
+
+  return (
+    <ToastStoreContext.Provider value={ctx}>
+      {children}
+    </ToastStoreContext.Provider>
+  );
+}
+
+ToastProvider.displayName = "ToastProvider";
+
+export function ToastViewport({
+  position = "bottom-right",
+  className,
+}: ToastViewportProps) {
+  const ctx = useContext(ToastStoreContext);
+  if (!ctx) {
+    throw new Error("ToastViewport must be used within <ToastProvider>");
+  }
+
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  if (!portalTarget) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={cn(toastViewportVariants({ position }), className)}
+      data-slot="toast-viewport"
+    >
+      {ctx.toasts.map((item) => (
+        <Toast
+          key={item.id}
+          toastId={item.id}
+          appearance={item.appearance}
+          size={item.size}
+          animation={item.animation}
+        >
+          <ToastTitle>{item.title}</ToastTitle>
+          {item.description ? (
+            <ToastDescription>{item.description}</ToastDescription>
+          ) : null}
+          <ToastClose onClick={() => ctx.dismiss(item.id)} />
+        </Toast>
+      ))}
+    </div>,
+    portalTarget,
+  );
+}
+
+ToastViewport.displayName = "ToastViewport";
+
+export function Toast({
+  toastId: _toastId,
+  appearance,
+  size,
+  animation: _animation = "slide",
+  className,
+  children,
+}: ToastProps) {
+  const live = appearance === "error" ? "assertive" : "polite";
+
+  return (
+    <div
+      data-slot="toast"
+      role={appearance === "error" ? "alert" : "status"}
+      aria-live={live}
+      aria-atomic="true"
+      className={cn(
+        "relative",
+        toastRootVariants({ appearance, size }),
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+Toast.displayName = "Toast";
+
+export function ToastTitle({ className, children }: ToastSectionProps) {
+  return (
+    <div data-slot="toast-title" className={cn("font-semibold", className)}>
+      {children}
+    </div>
+  );
+}
+
+ToastTitle.displayName = "ToastTitle";
+
+export function ToastDescription({ className, children }: ToastSectionProps) {
+  return (
+    <div
+      data-slot="toast-description"
+      className={cn("text-sm text-slate-300", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+ToastDescription.displayName = "ToastDescription";
+
+export function ToastAction({ className, children }: ToastSectionProps) {
+  return (
+    <div data-slot="toast-action" className={cn("mt-3", className)}>
+      {children}
+    </div>
+  );
+}
+
+ToastAction.displayName = "ToastAction";
+
+export function ToastClose({
+  className,
+  children,
+  onClick,
+  ...rest
+}: ToastSectionProps & { onClick?: () => void }) {
+  return (
+    <button
+      type="button"
+      data-slot="toast-close"
+      aria-label="Dismiss notification"
+      className={cn(
+        "absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-slate-200 transition hover:bg-white/10",
+        className,
+      )}
+      onClick={onClick}
+      {...rest}
+    >
+      {children ?? "×"}
+    </button>
+  );
+}
+
+ToastClose.displayName = "ToastClose";

package/src/ui/toast/toast.test.tsx

@@ -0,0 +1,102 @@
+import { useEffect } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ToastAnimation } from "./types";
+
+import { ToastProvider, ToastViewport, useToast } from "./toast";
+
+function ToastHarness({
+  title,
+  appearance,
+  id,
+  durationMs,
+  animation,
+}: {
+  title: string;
+  appearance?: "default" | "success" | "error" | "warning" | "info";
+  id?: string;
+  durationMs?: number;
+  animation?: ToastAnimation;
+}) {
+  const { toast: push } = useToast();
+  useEffect(() => {
+    push({ title, appearance, id, durationMs, animation });
+  }, [animation, appearance, durationMs, id, push, title]);
+  return <ToastViewport />;
+}
+
+describe("Toast", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should expose displayName on provider and viewport", () => {
+    expect(ToastProvider.displayName).toBe("ToastProvider");
+    expect(ToastViewport.displayName).toBe("ToastViewport");
+  });
+
+  it("should render pushed toasts in the viewport portal", async () => {
+    render(
+      <ToastProvider>
+        <ToastHarness title="Saved" id="toast-saved" durationMs={60_000} />
+      </ToastProvider>,
+    );
+    expect(await screen.findByText("Saved")).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="toast-viewport"]')).toBeTruthy();
+    expect(document.querySelector('[data-slot="toast"]')).toBeTruthy();
+  });
+
+  it("should use role alert for error toasts", async () => {
+    render(
+      <ToastProvider>
+        <ToastHarness
+          title="Failed"
+          appearance="error"
+          id="toast-err"
+          durationMs={60_000}
+        />
+      </ToastProvider>,
+    );
+    const root = await screen.findByRole("alert");
+    expect(root.getAttribute("data-slot")).toBe("toast");
+    expect(root).toHaveTextContent("Failed");
+  });
+
+  it("should dismiss when the close control is used", async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <ToastHarness title="Closable" id="toast-close" durationMs={60_000} />
+      </ToastProvider>,
+    );
+    expect(await screen.findByText("Closable")).toBeInTheDocument();
+    await user.click(
+      screen.getByRole("button", { name: /dismiss notification/i }),
+    );
+    await waitFor(() => {
+      expect(screen.queryByText("Closable")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should auto-dismiss after durationMs", async () => {
+    render(
+      <ToastProvider>
+        <ToastHarness
+          title="Short lived"
+          id="toast-auto"
+          durationMs={80}
+          animation="none"
+        />
+      </ToastProvider>,
+    );
+    expect(await screen.findByText("Short lived")).toBeInTheDocument();
+    await waitFor(
+      () => {
+        expect(screen.queryByText("Short lived")).not.toBeInTheDocument();
+      },
+      { timeout: 2000 },
+    );
+  }, 5000);
+});

package/src/ui/toast/toast.tsx

@@ -0,0 +1,13 @@
+// toast.tsx — default static entry (no framer-motion)
+export {
+  toast,
+  useToast,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastAction,
+  ToastClose,
+  ToastStoreContext,
+} from "./toast-base";

package/src/ui/toast/types.ts

@@ -0,0 +1,57 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ElementType, ReactNode } from "react";
+
+import type { toastRootVariants, toastViewportVariants } from "./variants";
+
+export type ToastAnimation = "none" | "slide" | "fade";
+
+export type ToastViewportVariantProps = VariantProps<typeof toastViewportVariants>;
+export type ToastRootVariantProps = VariantProps<typeof toastRootVariants>;
+
+export type ToastPosition = NonNullable<ToastViewportVariantProps["position"]>;
+
+export type ToastInput = ToastRootVariantProps & {
+  id?: string;
+  title?: ReactNode;
+  description?: ReactNode;
+  durationMs?: number;
+  animation?: ToastAnimation;
+};
+
+export type ToastContextValue = {
+  toast: (input: ToastInput) => string;
+  dismiss: (id: string) => void;
+};
+
+export type ToastProviderProps = {
+  children?: ReactNode;
+};
+
+export type ToastViewportProps = ToastViewportVariantProps & {
+  className?: string;
+};
+
+export type ToastProps = ToastRootVariantProps & {
+  toastId: string;
+  animation?: ToastAnimation;
+  className?: string;
+  children?: ReactNode;
+};
+
+export type ToastSectionProps = {
+  className?: string;
+  children?: ReactNode;
+  onClick?: () => void;
+};
+
+export type InternalToast = Required<Pick<ToastInput, "id">> &
+  Omit<ToastInput, "id"> & {
+    durationMs: number;
+    animation: NonNullable<ToastInput["animation"]>;
+  };
+
+export type ToastStoreContextValue = {
+  toasts: InternalToast[];
+  push: (input: ToastInput) => string;
+  dismiss: (id: string) => void;
+};

package/src/ui/toast/variants.ts

@@ -0,0 +1,73 @@
+import { cva } from "class-variance-authority";
+
+export const toastViewportVariants = cva(
+  "fixed z-[60] flex max-h-screen flex-col gap-2 p-4",
+  {
+    variants: {
+      position: {
+        "top-left": "left-0 top-0 items-start",
+        "top-center": "left-1/2 top-0 -translate-x-1/2 items-center",
+        "top-right": "right-0 top-0 items-end",
+        "bottom-left": "bottom-0 left-0 items-start",
+        "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
+        "bottom-right": "bottom-0 right-0 items-end",
+      },
+    },
+    defaultVariants: {
+      position: "bottom-right",
+    },
+  },
+);
+
+export const toastRootVariants = cva(
+  "pointer-events-auto w-[min(100vw-2rem,380px)] rounded-xl border border-white/10 bg-slate-950 p-4 text-slate-50 shadow-[0_18px_48px_rgba(15,23,42,0.45)]",
+  {
+    variants: {
+      appearance: {
+        default: "bg-slate-950",
+        success: "border-emerald-500/40 bg-emerald-950",
+        warning: "border-amber-500/40 bg-amber-950",
+        error: "border-rose-500/50 bg-rose-950",
+        info: "border-sky-500/40 bg-sky-950",
+        ghost: "border-transparent bg-transparent text-slate-200",
+        purple: "border-purple-600 bg-purple-950/70 backdrop-blur-xl",
+        pink: "border-pink-600 bg-pink-950/70 backdrop-blur-xl",
+        orange: "border-orange-600 bg-orange-950/70 backdrop-blur-xl",
+        yellow: "border-yellow-600 bg-yellow-950/70 backdrop-blur-xl",
+        teal: "border-teal-600 bg-teal-950/70 backdrop-blur-xl",
+        indigo: "border-indigo-600 bg-indigo-950/70 backdrop-blur-xl",
+        emerald: "border-emerald-600 bg-emerald-950/70 backdrop-blur-xl",
+        gray: "border-gray-600 bg-gray-950/70 backdrop-blur-xl",
+        amber: "border-amber-600 bg-amber-950/70 backdrop-blur-xl",
+        violet: "border-violet-600 bg-violet-950/70 backdrop-blur-xl",
+        "gradient-blue":
+          "border-gradient-to-r from-blue-600 to-purple-600 bg-gradient-to-r from-blue-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-green":
+          "border-gradient-to-r from-green-600 to-lime-600 bg-gradient-to-r from-green-950/70 to-lime-950/70 backdrop-blur-xl",
+        "gradient-red":
+          "border-gradient-to-r from-red-600 to-pink-600 bg-gradient-to-r from-red-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-yellow":
+          "border-gradient-to-r from-yellow-600 to-orange-600 bg-gradient-to-r from-yellow-950/70 to-orange-950/70 backdrop-blur-xl",
+        "gradient-purple":
+          "border-gradient-to-r from-purple-600 to-pink-600 bg-gradient-to-r from-purple-950/70 to-pink-950/70 backdrop-blur-xl",
+        "gradient-teal":
+          "border-gradient-to-r from-teal-600 to-cyan-600 bg-gradient-to-r from-teal-950/70 to-cyan-950/70 backdrop-blur-xl",
+        "gradient-indigo":
+          "border-gradient-to-r from-indigo-600 to-purple-600 bg-gradient-to-r from-indigo-950/70 to-purple-950/70 backdrop-blur-xl",
+        "gradient-pink":
+          "border-gradient-to-r from-pink-600 to-rose-600 bg-gradient-to-r from-pink-950/70 to-rose-950/70 backdrop-blur-xl",
+        "gradient-orange":
+          "border-gradient-to-r from-orange-600 to-red-600 bg-gradient-to-r from-orange-950/70 to-red-950/70 backdrop-blur-xl",
+      },
+      size: {
+        sm: "p-3 text-xs",
+        md: "p-4 text-sm",
+        lg: "p-5 text-base",
+      },
+    },
+    defaultVariants: {
+      appearance: "default",
+      size: "md",
+    },
+  },
+);

package/src/ui/toggle/animated/animations.ts

@@ -0,0 +1,9 @@
+import { ToggleAnimationPresets } from "./types";
+
+export const toggleThumbAnimationPresets: ToggleAnimationPresets = {
+  none: {},
+  spring: {
+    layout: true,
+    transition: { type: "spring", stiffness: 520, damping: 32 },
+  },
+};

package/src/ui/toggle/animated/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+export { ToggleAnimated } from "./toggle-animated";
+export type { ToggleAnimatedProps, ToggleAnimation, ToggleAnimationPresets, ToggleThumbPreset} from "./types";
+export {
+  toggleThumbAnimationPresets,
+} from "./animations";