pejay-ui 1.4.3 → 1.5.0

package/templates/panels/components/base-card.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { cn } from "@/pejay-ui/utils/cn";
+
+interface BaseCardProps {
+  children?: ReactNode;
+  /** Override padding. Defaults to "p-2.5" */
+  padding?: string;
+  /** Override border radius. Defaults to "rounded-md" */
+  rounded?: string;
+  /** CSS height value e.g. "200px" | "50vh". min-h-0 is always applied. */
+  height?: string;
+  /** Override width. Defaults to "w-full" */
+  width?: string;
+  className?: string;
+}
+
+export function BaseCard({
+  children,
+  padding = "p-2.5",
+  rounded = "rounded-md",
+  height,
+  width = "w-full",
+  className,
+}: BaseCardProps) {
+  return (
+    <div
+      className={cn("flex flex-row min-h-0", rounded, width, padding, className)}
+      style={height ? { height } : undefined}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/panels/components/index.ts

@@ -0,0 +1,8 @@
+export * from "./base-card";
+export * from "./modal/modal";
+export * from "./modal/modal-card";
+export * from "./modal/modal-raw";
+export * from "./modal/backdrop";
+export * from "./side-panel/side-panel";
+export * from "./side-panel/side-panel-card";
+export * from "./side-panel/side-panel-raw";

package/templates/panels/components/modal/backdrop.tsx

@@ -0,0 +1,88 @@
+import React, { useEffect } from "react";
+import { getOverlayBackdropZ } from "../../core/constants";
+import { requestOverlayCloseWithConfirm } from "../../core/overlay-close";
+
+interface BackdropProps {
+  children?: React.ReactNode;
+  onClose?: () => void;
+  justify?: string;
+  items?: string;
+  visible?: boolean;
+  isActive?: boolean;
+  layer?: number;
+}
+
+export function Backdrop({
+  children,
+  onClose,
+  justify = "justify-center",
+  items = "items-center",
+  visible = true,
+  isActive = true,
+  layer = 1,
+}: BackdropProps) {
+  useEffect(() => {
+    if (!isActive) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isActive]);
+
+  if (!isActive) {
+    return (
+      <div className="pointer-events-none invisible fixed inset-0" aria-hidden>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <style>{`
+        @keyframes backdropFadeIn {
+          from {
+            opacity: 0;
+            backdrop-filter: blur(0px);
+          }
+          to {
+            opacity: 1;
+            backdrop-filter: blur(4px);
+          }
+        }
+        @keyframes backdropFadeOut {
+          from {
+            opacity: 1;
+            backdrop-filter: blur(4px);
+          }
+          to {
+            opacity: 0;
+            backdrop-filter: blur(0px);
+          }
+        }
+        .animate-backdrop-fade {
+          animation: backdropFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+        .animate-backdrop-fade-out {
+          animation: backdropFadeOut 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+      `}</style>
+
+      <div
+        className={`fixed inset-0 overflow-hidden flex flex-row ${items} ${justify}`}
+        style={{ zIndex: getOverlayBackdropZ(layer) }}
+      >
+        <div
+          onClick={() => requestOverlayCloseWithConfirm()}
+          className={`absolute inset-0 cursor-pointer bg-slate-900/20 ${
+            visible ? "animate-backdrop-fade" : "animate-backdrop-fade-out"
+          }`}
+        />
+        <div className="relative z-10">{children}</div>
+      </div>
+    </>
+  );
+}

package/templates/panels/components/modal/modal-card.tsx

@@ -0,0 +1,139 @@
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/pejay-ui/utils/cn";
+import type { FormTabsConfig } from "../../core/types";
+import { requestOverlayCloseWithConfirm } from "../../core/overlay-close";
+import { useFormOverlayRegistration } from "../../hooks/useFormOverlayRegistration";
+
+export type ModalCardSize = "sm" | "md" | "lg" | "xl";
+
+const MODAL_WIDTH: Record<ModalCardSize, string> = {
+  sm: "min(420px, 92vw)",
+  md: "min(560px, 92vw)",
+  lg: "min(720px, 92vw)",
+  xl: "min(900px, 92vw)",
+};
+
+interface ModalCardProps {
+  children: ReactNode;
+  className?: string;
+  title?: string;
+  description?: string;
+  footer?: ReactNode;
+  close?: () => void;
+  /** Preset widths — use `width` to override entirely. */
+  size?: ModalCardSize;
+  /** Custom CSS width; overrides `size`. */
+  width?: string;
+  maxHeight?: string;
+  /** Renders below title row (e.g. tabs). */
+  headerSlot?: ReactNode;
+  bodyClassName?: string;
+  /** When provided, Ctrl+Enter triggers this handler. */
+  onSubmit?: () => void;
+  /** Enables unsaved-changes guard on close. */
+  isDirty?: boolean;
+  /** Blocks X button and Escape while an async action is in progress. */
+  closeDisabled?: boolean;
+  formTabs?: FormTabsConfig;
+}
+
+export function ModalCard({
+  children,
+  title,
+  description,
+  footer,
+  className,
+  close,
+  size = "md",
+  width,
+  maxHeight = "min(90vh, 720px)",
+  headerSlot,
+  bodyClassName,
+  onSubmit,
+  isDirty = false,
+  closeDisabled = false,
+  formTabs,
+}: ModalCardProps) {
+  const modalWidth = width ?? MODAL_WIDTH[size];
+
+  useFormOverlayRegistration({
+    enabled: Boolean(close),
+    onSubmit,
+    isDirty,
+    closeDisabled,
+    formTabs,
+  });
+
+  const handleClose = () => {
+    if (closeDisabled) return;
+    if (close) requestOverlayCloseWithConfirm();
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col overflow-hidden rounded-xl bg-white shadow-2xl",
+        className,
+      )}
+      style={{ width: modalWidth, maxHeight }}
+      onClick={(e) => e.stopPropagation()}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? "modal-title" : undefined}
+    >
+      {/* Header */}
+      <div className="shrink-0 border-b border-slate-200 px-6 pt-5 pb-0">
+        <div className="flex items-start justify-between gap-3 pb-4">
+          <div className="min-w-0">
+            {title && (
+              <h2
+                id="modal-title"
+                className="text-lg font-bold tracking-tight text-slate-900"
+              >
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="mt-0.5 text-sm text-slate-500">{description}</p>
+            )}
+          </div>
+          {close && (
+            <button
+              type="button"
+              onClick={handleClose}
+              disabled={closeDisabled}
+              className={cn(
+                "shrink-0 rounded-full p-2 text-slate-400 transition-colors",
+                closeDisabled
+                  ? "cursor-not-allowed opacity-40"
+                  : "cursor-pointer hover:bg-slate-100 hover:text-slate-600",
+              )}
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" strokeWidth={2} />
+            </button>
+          )}
+        </div>
+        {headerSlot}
+      </div>
+
+      {/* Body */}
+      <div
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto px-6 py-5",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </div>
+
+      {/* Footer */}
+      {footer && (
+        <div className="shrink-0 border-t border-slate-200 bg-white px-6 py-4">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/panels/components/modal/modal-raw.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import { cn } from "@/pejay-ui/utils/cn";
+
+interface ModalRawProps {
+  children: ReactNode;
+  className?: string;
+  width?: string;
+  maxHeight?: string;
+}
+
+/**
+ * A bare modal container with no title, no X button, and no footer.
+ * Use this when you want to render fully custom content inside a centered modal.
+ * Mount it via `openRawModal` from `useOverlay`.
+ */
+export function ModalRaw({
+  children,
+  className,
+  width = "min(560px, 92vw)",
+  maxHeight = "min(90vh, 720px)",
+}: ModalRawProps) {
+  return (
+    <div
+      className={cn(
+        "overflow-y-auto rounded-xl bg-white shadow-2xl p-2",
+        className,
+      )}
+      style={{ width, maxHeight }}
+      onClick={(e) => e.stopPropagation()}
+      role="dialog"
+      aria-modal="true"
+    >
+      {children}
+    </div>
+  );
+}

package/templates/panels/components/modal/modal.tsx

@@ -0,0 +1,49 @@
+import { useEffect, type ReactNode } from "react";
+import type { OverlayOptions } from "../../core/types";
+import {
+  registerActiveOverlayClose,
+  unregisterActiveOverlayClose,
+} from "../../core/form-overlay-registry";
+import { Portal } from "@/pejay-ui/components/overlays";
+import { Backdrop } from "./backdrop";
+import { getOverlayContentZ } from "../../core/constants";
+
+interface ModalBaseProps {
+  children?: ReactNode;
+  onClose?: () => void;
+  options: OverlayOptions;
+  isActive?: boolean;
+  layer?: number;
+}
+
+export const Modal = ({
+  children,
+  onClose,
+  options,
+  isActive = true,
+  layer = 1,
+}: ModalBaseProps) => {
+  useEffect(() => {
+    if (!isActive || !onClose) return;
+    registerActiveOverlayClose(onClose);
+    return () => unregisterActiveOverlayClose(onClose);
+  }, [isActive, onClose]);
+
+  return (
+    <Portal>
+      <Backdrop
+        {...options}
+        onClose={onClose}
+        isActive={isActive}
+        layer={layer}
+      >
+        <div
+          className="relative"
+          style={{ zIndex: getOverlayContentZ(layer) }}
+        >
+          {children}
+        </div>
+      </Backdrop>
+    </Portal>
+  );
+};

package/templates/panels/components/side-panel/side-panel-card.tsx

@@ -0,0 +1,123 @@
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/pejay-ui/utils/cn";
+import type { FormTabsConfig } from "../../core/types";
+import { requestOverlayCloseWithConfirm } from "../../core/overlay-close";
+import { useFormOverlayRegistration } from "../../hooks/useFormOverlayRegistration";
+
+export type SidePanelSize = "sm" | "md" | "lg" | "xl";
+
+const PANEL_WIDTH: Record<SidePanelSize, string> = {
+  sm: "min(480px, 100vw)",
+  md: "min(560px, 100vw)",
+  lg: "min(720px, 92vw)",
+  xl: "min(840px, 95vw)",
+};
+
+interface SidePanelCardProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  className?: string;
+  close?: () => void;
+  footer?: ReactNode;
+  /** Preset widths — use `width` to override entirely. */
+  size?: SidePanelSize;
+  /** Custom CSS width; overrides `size`. */
+  width?: string;
+  /** Renders below title row (e.g. tabs). */
+  headerSlot?: ReactNode;
+  bodyClassName?: string;
+  onSubmit?: () => void;
+  isDirty?: boolean;
+  /** Blocks close via X, Escape, and backdrop while an async action is in progress. */
+  closeDisabled?: boolean;
+  formTabs?: FormTabsConfig;
+}
+
+export function SidePanelCard({
+  children,
+  title,
+  description,
+  className,
+  close,
+  footer,
+  size = "sm",
+  width,
+  headerSlot,
+  bodyClassName,
+  onSubmit,
+  isDirty = false,
+  closeDisabled = false,
+  formTabs,
+}: SidePanelCardProps) {
+  const panelWidth = width ?? PANEL_WIDTH[size];
+
+  useFormOverlayRegistration({
+    enabled: Boolean(close),
+    onSubmit,
+    isDirty,
+    closeDisabled,
+    formTabs,
+  });
+
+  const handleClose = () => {
+    if (closeDisabled) return;
+    requestOverlayCloseWithConfirm();
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-stretch h-screen max-w-full overflow-hidden border-l border-slate-200 bg-white shadow-2xl",
+        className,
+      )}
+      style={{ width: panelWidth }}
+    >
+      <div className="w-full shrink-0 border-b border-slate-200 px-6 pt-4 pb-0">
+        <div className="flex flex-row items-center justify-between pb-4">
+          <div className="flex flex-col min-w-0 gap-0.5">
+            {title && (
+              <h2 className="text-lg font-bold tracking-tight text-slate-900">
+                {title}
+              </h2>
+            )}
+            {description && (
+              <p className="text-sm text-slate-500">{description}</p>
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={closeDisabled}
+            className={cn(
+              "shrink-0 rounded-full p-2 text-slate-600 transition-colors",
+              closeDisabled
+                ? "cursor-not-allowed opacity-40"
+                : "cursor-pointer hover:bg-slate-100 hover:text-slate-600",
+            )}
+            aria-label="Close panel"
+          >
+            <X className="h-4 w-4" strokeWidth={2} />
+          </button>
+        </div>
+        {headerSlot}
+      </div>
+
+      <div
+        className={cn(
+          "min-h-0 w-full flex-1 overflow-y-auto px-6 py-5",
+          bodyClassName,
+        )}
+      >
+        {children}
+      </div>
+
+      {footer && (
+        <div className="w-full shrink-0 border-t border-slate-200 bg-white px-6 py-4">
+          {footer}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/panels/components/side-panel/side-panel-raw.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { cn } from "@/pejay-ui/utils/cn";
+
+interface SidePanelRawProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * A bare side panel container with no title, no X button, and no footer.
+ * Use this when you want to render fully custom content inside a side panel.
+ * Mount it via `openRawSidePanel` from `useOverlay`.
+ */
+export function SidePanelRaw({ children, className }: SidePanelRawProps) {
+  return (
+    <div
+      className={cn(
+        "flex h-screen max-w-full flex-col overflow-y-auto border-l border-slate-200 bg-white shadow-2xl p-2",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/templates/panels/components/side-panel/side-panel.tsx

@@ -0,0 +1,135 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Portal } from "@/pejay-ui/components/overlays";
+import type { OverlayContent, OverlayOptions } from "../../core/types";
+import {
+  getOverlayBackdropZ,
+  getOverlayContentZ,
+} from "../../core/constants";
+import {
+  registerActiveOverlayClose,
+  unregisterActiveOverlayClose,
+} from "../../core/form-overlay-registry";
+import { requestOverlayCloseWithConfirm } from "../../core/overlay-close";
+
+const panelSpring = { type: "spring" as const, damping: 25, stiffness: 200 };
+
+const SidePanelCloseContext = createContext<(() => void) | null>(null);
+
+/** Animated close — use this instead of AppProvider's immediate close. */
+export function useAnimatedSidePanelClose() {
+  const close = useContext(SidePanelCloseContext);
+  if (!close) {
+    throw new Error("useAnimatedSidePanelClose must be used within SidePanel");
+  }
+  return close;
+}
+
+interface SidePanelBaseProps {
+  children?: ReactNode;
+  onClose?: () => void;
+  options: OverlayOptions;
+  isActive?: boolean;
+  layer?: number;
+}
+
+export function SidePanel({
+  children,
+  onClose,
+  options,
+  isActive = true,
+  layer = 1,
+}: SidePanelBaseProps) {
+  const [isOpen, setIsOpen] = useState(true);
+  const isLeft = options?.onSide === "left";
+
+  const requestClose = useCallback(() => setIsOpen(false), []);
+
+  useEffect(() => {
+    if (!isActive) return;
+    registerActiveOverlayClose(requestClose);
+    return () => unregisterActiveOverlayClose(requestClose);
+  }, [isActive, requestClose]);
+
+  useEffect(() => {
+    if (!isOpen || !isActive) return;
+
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isActive, isOpen]);
+
+  const offscreenX = isLeft ? "-100%" : "100%";
+  const panelPosition = isLeft ? "left-0" : "right-0";
+  const backdropZ = getOverlayBackdropZ(layer);
+  const panelZ = getOverlayContentZ(layer);
+
+  if (!isActive) {
+    return (
+      <Portal>
+        <div
+          className="pointer-events-none invisible fixed inset-0"
+          aria-hidden
+        >
+          <SidePanelCloseContext.Provider value={requestClose}>
+            {children}
+          </SidePanelCloseContext.Provider>
+        </div>
+      </Portal>
+    );
+  }
+
+  return (
+    <Portal>
+      <SidePanelCloseContext.Provider value={requestClose}>
+        <AnimatePresence onExitComplete={() => onClose?.()}>
+          {isOpen && (
+            <>
+              <motion.div
+                key="side-panel-backdrop"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="fixed inset-0 bg-slate-900/20 backdrop-blur-sm"
+                style={{ zIndex: backdropZ }}
+                onClick={requestOverlayCloseWithConfirm}
+                aria-hidden
+              />
+              <motion.div
+                key="side-panel-panel"
+                initial={{ x: offscreenX }}
+                animate={{ x: 0 }}
+                exit={{ x: offscreenX }}
+                transition={panelSpring}
+                className={`fixed inset-y-0 flex h-full ${panelPosition}`}
+                style={{ zIndex: panelZ }}
+              >
+                {children}
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+      </SidePanelCloseContext.Provider>
+    </Portal>
+  );
+}
+
+type SidePanelContentProps = {
+  content?: OverlayContent;
+};
+
+/** Renders provider content with animated `close` wired to the panel. */
+export function SidePanelContent({ content }: SidePanelContentProps) {
+  const requestClose = useAnimatedSidePanelClose();
+  return content?.({ close: requestClose }) ?? null;
+}