modal-system 1.0.0

package/dist/cli/templates/daisyui/ConfirmModal.tsx.tpl

@@ -0,0 +1,65 @@
+/**
+ * ConfirmModal.tsx  (DaisyUI)
+ *
+ * Uses the native <dialog> API via the Modal primitive in Modal.tsx.
+ */
+
+import { useRef } from "react";
+import type { BaseModalProps } from "modal-system";
+import type { ConfirmModalData } from "./modals";
+import { Modal, ModalContent } from "./Modal";
+
+export function ConfirmModal({
+  isOpen,
+  onClose,
+  data,
+}: BaseModalProps<ConfirmModalData>) {
+  const modalRef = useRef<HTMLDialogElement>(null);
+
+  const handleCancel = () => {
+    data?.onCancel?.();
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    data?.onConfirm?.();
+    onClose();
+  };
+
+  return (
+    <Modal ref={modalRef} isOpen={isOpen} onClose={onClose}>
+      <ModalContent className="text-left">
+        {data?.title && (
+          <h3 className="font-bold text-lg">{data.title}</h3>
+        )}
+        {data?.message && (
+          <p className="mt-4 text-sm text-base-content/80">{data.message}</p>
+        )}
+
+        <div className="modal-action">
+          <form method="dialog">
+            <div className="flex gap-2">
+              <button
+                type="button"
+                className="btn btn-sm btn-soft"
+                onClick={handleCancel}
+              >
+                {data?.cancelText ?? "Cancel"}
+              </button>
+
+              {(data?.showConfirm ?? true) && (
+                <button
+                  type="button"
+                  className="btn btn-soft btn-sm bg-red-100 dark:bg-red-800 dark:text-white border-none text-red-500"
+                  onClick={handleConfirm}
+                >
+                  {data?.confirmText ?? "Confirm"}
+                </button>
+              )}
+            </div>
+          </form>
+        </div>
+      </ModalContent>
+    </Modal>
+  );
+}

package/dist/cli/templates/daisyui/Modal.tsx.tpl

@@ -0,0 +1,76 @@
+/**
+ * Modal.tsx  (DaisyUI)
+ *
+ * Base modal primitives for DaisyUI.
+ * Uses the native <dialog> API — no CSS `modal-open` class trick needed.
+ *
+ * Usage:
+ *   import { Modal, ModalContent } from "./Modal"
+ *
+ *   <Modal isOpen={isOpen} onClose={onClose}>
+ *     <ModalContent>...</ModalContent>
+ *   </Modal>
+ */
+
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+type ModalProps = {
+  children: ReactNode;
+  isOpen?: boolean;
+  onClose?: () => void;
+};
+
+/**
+ * Wraps the native <dialog> element.
+ * Calls showModal() / close() in response to the `isOpen` prop so that
+ * DaisyUI's backdrop and animations work correctly.
+ */
+const Modal = forwardRef<HTMLDialogElement, ModalProps>(
+  ({ children, isOpen, onClose }, forwardedRef) => {
+    const internalRef = useRef<HTMLDialogElement>(null);
+    const ref = (forwardedRef as React.RefObject<HTMLDialogElement>) ?? internalRef;
+
+    useEffect(() => {
+      const dialog = ref.current;
+      if (!dialog) return;
+
+      if (isOpen) {
+        // showModal() enables the backdrop and traps focus
+        if (!dialog.open) dialog.showModal();
+      } else {
+        if (dialog.open) dialog.close();
+      }
+    }, [isOpen, ref]);
+
+    return (
+      <dialog ref={ref} className="modal" onClose={onClose}>
+        {children}
+        {/* Clicking the backdrop closes the dialog via the native form[method=dialog] */}
+        <form method="dialog" className="modal-backdrop">
+          <button type="submit" aria-label="Close modal" />
+        </form>
+      </dialog>
+    );
+  }
+);
+
+Modal.displayName = "Modal";
+
+/** Applies DaisyUI modal-box styling with a white background */
+const ModalContent = ({
+  className = "",
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className={`modal-box bg-base-100 ${className}`} {...props}>
+    {children}
+  </div>
+);
+
+export { Modal, ModalContent };

package/dist/cli/templates/daisyui/index.ts.tpl

@@ -0,0 +1,37 @@
+/**
+ * modals/index.ts
+ *
+ * Register your modal components here.
+ * The key you use (e.g. "confirm") becomes the name you pass to openModal().
+ *
+ * Steps for adding a new modal:
+ *   1. Add its data type in modals.ts
+ *   2. Create the component (copy ConfirmModal.tsx as a starting point)
+ *   3. Add an entry to MODALS below
+ */
+
+import { defineModals, createModalHook } from "modal-system";
+
+import { ConfirmModal } from "./ConfirmModal";
+// import { DeleteUserModal } from "./DeleteUserModal";
+
+// ── Register all your modals here ────────────────────────────────────────────
+
+export const MODALS = defineModals({
+  confirm: ConfirmModal,
+  // deleteUser: DeleteUserModal,
+});
+
+// ── Export the typed hook ─────────────────────────────────────────────────────
+//
+// Import `useModal` from THIS file in your components, not from "modal-system".
+// That way openModal() knows about your specific modals and provides autocomplete.
+
+export const useModal = createModalHook(MODALS);
+
+// ── Re-export Modal primitives ────────────────────────────────────────────────
+//
+// Use Modal + ModalContent when building your own modals so they share
+// the same <dialog> / DaisyUI base behaviour.
+
+export { Modal, ModalContent } from "./Modal";

package/dist/cli/templates/daisyui/modals.ts.tpl

@@ -0,0 +1,37 @@
+/**
+ * modals.ts
+ *
+ * Define the data interface for each modal here.
+ * The key must match the name you register in index.ts.
+ *
+ * Your component receives these fields via the `data` prop:
+ *   function ConfirmModal({ data }: BaseModalProps<ConfirmModalData>) {
+ *     data?.title
+ *     data?.message
+ *   }
+ */
+
+// ── Add your own modals below ────────────────────────────────────────────────
+
+export interface ConfirmModalData {
+  title?: string;
+  /** Body text shown below the title */
+  message?: string;
+  /** Confirm button label. Defaults to "Confirm" */
+  confirmText?: string;
+  /** Cancel button label. Defaults to "Cancel" */
+  cancelText?: string;
+  /** Called when the user clicks the confirm button */
+  onConfirm?: () => void;
+  /** Called when the user clicks the cancel button */
+  onCancel?: () => void;
+  /** Set false to hide the confirm button entirely. Defaults to true */
+  showConfirm?: boolean;
+}
+
+// Example of another modal:
+// export interface DeleteUserModalData {
+//   userId: string;
+//   userName: string;
+//   onDeleted?: () => void;
+// }

package/dist/cli/templates/shadcn-baseui/ConfirmModal.tsx.tpl

@@ -0,0 +1,68 @@
+/**
+ * ConfirmModal.tsx  (shadcn/ui — backed by Base UI)
+ *
+ * Requires: @base-ui-components/react
+ *   bun add @base-ui-components/react
+ */
+
+import { Dialog } from "@base-ui-components/react/dialog";
+import type { BaseModalProps } from "modal-system";
+import type { ConfirmModalData } from "./modals";
+
+export function ConfirmModal({
+  isOpen,
+  onClose,
+  data,
+}: BaseModalProps<ConfirmModalData>) {
+  const handleClose = () => {
+    data?.onCancel?.();
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    data?.onConfirm?.();
+    onClose();
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <Dialog.Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black/50 transition-opacity data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />
+
+        <Dialog.Popup className="fixed left-1/2 top-1/2 z-50 w-full max-w-md min-h-40 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-background p-6 shadow-lg transition-all data-[ending-style]:opacity-0 data-[ending-style]:scale-95 data-[starting-style]:opacity-0 data-[starting-style]:scale-95">
+          <div className="flex flex-col gap-1">
+            <Dialog.Title className="text-lg">
+              {data?.title ?? "Are you sure?"}
+            </Dialog.Title>
+            {data?.description && (
+              <Dialog.Description className="text-xs text-muted-foreground">
+                {data.description}
+              </Dialog.Description>
+            )}
+          </div>
+
+          <div className="absolute bottom-3 right-3 flex gap-1">
+            <Dialog.Close
+              className="inline-flex h-9 items-center justify-center rounded-md bg-secondary px-4 text-sm font-medium text-secondary-foreground shadow-sm transition-colors hover:bg-secondary/80"
+              onClick={handleClose}
+            >
+              {data?.closeText ?? "Cancel"}
+            </Dialog.Close>
+
+            <button
+              type="button"
+              onClick={handleConfirm}
+              className={`inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium shadow transition-colors ${
+                data?.isActionButtonDestructive
+                  ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                  : "bg-primary text-primary-foreground hover:bg-primary/90"
+              }`}
+            >
+              {data?.actionText ?? "Confirm"}
+            </button>
+          </div>
+        </Dialog.Popup>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/dist/cli/templates/shadcn-baseui/index.ts.tpl

@@ -0,0 +1,15 @@
+/**
+ * modals/index.ts
+ *
+ * Register your modal components here.
+ */
+
+import { defineModals, createModalHook } from "modal-system";
+
+import { ConfirmModal } from "./ConfirmModal";
+
+export const MODALS = defineModals({
+  confirm: ConfirmModal,
+});
+
+export const useModal = createModalHook(MODALS);

package/dist/cli/templates/shadcn-baseui/modals.ts.tpl

@@ -0,0 +1,20 @@
+/**
+ * modals.ts
+ *
+ * Define the data interface for each modal here.
+ * The key must match the name you register in index.ts.
+ */
+
+import type { ReactNode } from "react";
+
+export interface ConfirmModalData {
+  title?: string;
+  description?: string | ReactNode;
+  /** Confirm button label. Defaults to "Confirm" */
+  actionText?: string;
+  /** Cancel button label. Defaults to "Cancel" */
+  closeText?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  isActionButtonDestructive?: boolean;
+}

package/dist/cli/templates/shadcn-radix/ConfirmModal.tsx.tpl

@@ -0,0 +1,63 @@
+/**
+ * ConfirmModal.tsx  (shadcn/ui — backed by Radix UI)
+ *
+ * Requires shadcn/ui Dialog and Button components in your project:
+ *   npx shadcn@latest add dialog button
+ */
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { BaseModalProps } from "modal-system";
+import type { ConfirmModalData } from "./modals";
+
+export function ConfirmModal({
+  isOpen,
+  onClose,
+  data,
+}: BaseModalProps<ConfirmModalData>) {
+  const handleClose = () => {
+    data?.onCancel?.();
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    data?.onConfirm?.();
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <DialogContent className="min-h-40">
+        <DialogHeader className="flex flex-col">
+          <span className="text-lg">
+            {data?.title ?? "Are you sure?"}
+          </span>
+          {data?.description && (
+            <span className="text-xs text-muted-foreground">
+              {data.description}
+            </span>
+          )}
+        </DialogHeader>
+
+        <DialogDescription asChild>
+          <div className="absolute bottom-3 right-3 flex gap-1">
+            <Button onClick={handleClose} variant="secondary">
+              {data?.closeText ?? "Cancel"}
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              variant={data?.isActionButtonDestructive ? "destructive" : "default"}
+            >
+              {data?.actionText ?? "Confirm"}
+            </Button>
+          </div>
+        </DialogDescription>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/dist/cli/templates/shadcn-radix/index.ts.tpl

@@ -0,0 +1,19 @@
+/**
+ * modals/index.ts
+ *
+ * Register your modal components here.
+ * The key you use (e.g. "confirm") becomes the name you pass to openModal().
+ */
+
+import { defineModals, createModalHook } from "modal-system";
+
+import { ConfirmModal } from "./ConfirmModal";
+// import { DeleteUserModal } from "./DeleteUserModal";
+
+export const MODALS = defineModals({
+  confirm: ConfirmModal,
+  // deleteUser: DeleteUserModal,
+});
+
+// Import `useModal` from THIS file in your components — it is typed to your registry.
+export const useModal = createModalHook(MODALS);

package/dist/cli/templates/shadcn-radix/modals.ts.tpl

@@ -0,0 +1,37 @@
+/**
+ * modals.ts
+ *
+ * Define the data interface for each modal here.
+ * The key must match the name you register in index.ts.
+ *
+ * Your component receives these fields via the `data` prop:
+ *   function ConfirmModal({ data }: BaseModalProps<ConfirmModalData>) {
+ *     data?.title
+ *   }
+ */
+
+import type { ReactNode } from "react";
+
+// ── Add your own modals below ────────────────────────────────────────────────
+
+export interface ConfirmModalData {
+  title?: string;
+  description?: string | ReactNode;
+  /** Confirm button label. Defaults to "Confirm" */
+  actionText?: string;
+  /** Cancel button label. Defaults to "Cancel" */
+  closeText?: string;
+  /** Called when the user clicks the confirm button */
+  onConfirm?: () => void;
+  /** Called when the user clicks the cancel / X button */
+  onCancel?: () => void;
+  /** Renders the confirm button with destructive (red) variant */
+  isActionButtonDestructive?: boolean;
+}
+
+// Example of another modal:
+// export interface DeleteUserModalData {
+//   userId: string;
+//   userName: string;
+//   onDeleted?: () => void;
+// }

package/dist/index.d.mts

@@ -0,0 +1,86 @@
+import React, { ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Every modal component must accept these props.
+ * TData is the shape of the `data` object passed through openModal().
+ *
+ * @example
+ * function ConfirmModal({ isOpen, onClose, data }: BaseModalProps<ConfirmModalData>) {
+ *   return <dialog>...{data?.title}...</dialog>
+ * }
+ */
+interface BaseModalProps<TData = unknown> {
+    isOpen: boolean;
+    onClose: () => void;
+    data?: TData;
+}
+type ModalRegistry = Record<string, ComponentType<BaseModalProps<any>>>;
+/**
+ * Given a modal component, extracts its TData generic.
+ *
+ * ExtractModalData<typeof ConfirmModal>
+ *   → ConfirmModalData  →  { title?: string; description?: string; ... }
+ */
+type ExtractModalData<C> = C extends ComponentType<BaseModalProps<infer D>> ? D : never;
+/**
+ * Builds a full map of  modalName → its data interface  from a ModalRegistry.
+ *
+ * ModalDataMap<typeof MODALS>
+ *   → { confirm: ConfirmModalData, upload: UploadModalData, ... }
+ */
+type ModalDataMap<T extends ModalRegistry> = {
+    [K in keyof T]: ExtractModalData<T[K]>;
+};
+
+interface ModalProviderProps<T extends ModalRegistry> {
+    modals: T;
+    children: React.ReactNode;
+}
+/**
+ * Wrap your application root with this provider.
+ *
+ * @example
+ * import { ModalProvider } from "modal-system"
+ * import { MODALS } from "./modals"
+ *
+ * <ModalProvider modals={MODALS}>
+ *   <App />
+ * </ModalProvider>
+ */
+declare function ModalProvider<T extends ModalRegistry>({ modals, children, }: ModalProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Factory that creates a fully type-safe `useModal` hook bound to your modals registry.
+ *
+ * @example
+ * // modals/index.ts
+ * export const MODALS = defineModals({ confirm: ConfirmModal })
+ * export const useModal = createModalHook(MODALS)
+ *
+ * // SomeComponent.tsx
+ * const { openModal, closeModal } = useModal()
+ * openModal("confirm", { title: "Delete?" })  // ← autocomplete on name + data shape
+ */
+declare function createModalHook<T extends ModalRegistry>(_modals: T): () => {
+    /**
+     * Open a modal by name. The second argument must match the data
+     * interface of the registered component.
+     */
+    openModal: <K extends keyof T & string>(name: K, data?: ModalDataMap<T>[K]) => void;
+    closeModal: () => void;
+};
+
+/**
+ * Helper that returns its argument unchanged but enforces the ModalRegistry constraint.
+ * Use this when defining your MODALS object to get inference + type checking.
+ *
+ * @example
+ * export const MODALS = defineModals({
+ *   confirm: ConfirmModal,
+ *   upload:  UploadModal,
+ * })
+ */
+declare function defineModals<T extends ModalRegistry>(modals: T): T;
+
+export { type BaseModalProps, type ModalDataMap, ModalProvider, type ModalRegistry, createModalHook, defineModals };

package/dist/index.d.ts

@@ -0,0 +1,86 @@
+import React, { ComponentType } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Every modal component must accept these props.
+ * TData is the shape of the `data` object passed through openModal().
+ *
+ * @example
+ * function ConfirmModal({ isOpen, onClose, data }: BaseModalProps<ConfirmModalData>) {
+ *   return <dialog>...{data?.title}...</dialog>
+ * }
+ */
+interface BaseModalProps<TData = unknown> {
+    isOpen: boolean;
+    onClose: () => void;
+    data?: TData;
+}
+type ModalRegistry = Record<string, ComponentType<BaseModalProps<any>>>;
+/**
+ * Given a modal component, extracts its TData generic.
+ *
+ * ExtractModalData<typeof ConfirmModal>
+ *   → ConfirmModalData  →  { title?: string; description?: string; ... }
+ */
+type ExtractModalData<C> = C extends ComponentType<BaseModalProps<infer D>> ? D : never;
+/**
+ * Builds a full map of  modalName → its data interface  from a ModalRegistry.
+ *
+ * ModalDataMap<typeof MODALS>
+ *   → { confirm: ConfirmModalData, upload: UploadModalData, ... }
+ */
+type ModalDataMap<T extends ModalRegistry> = {
+    [K in keyof T]: ExtractModalData<T[K]>;
+};
+
+interface ModalProviderProps<T extends ModalRegistry> {
+    modals: T;
+    children: React.ReactNode;
+}
+/**
+ * Wrap your application root with this provider.
+ *
+ * @example
+ * import { ModalProvider } from "modal-system"
+ * import { MODALS } from "./modals"
+ *
+ * <ModalProvider modals={MODALS}>
+ *   <App />
+ * </ModalProvider>
+ */
+declare function ModalProvider<T extends ModalRegistry>({ modals, children, }: ModalProviderProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Factory that creates a fully type-safe `useModal` hook bound to your modals registry.
+ *
+ * @example
+ * // modals/index.ts
+ * export const MODALS = defineModals({ confirm: ConfirmModal })
+ * export const useModal = createModalHook(MODALS)
+ *
+ * // SomeComponent.tsx
+ * const { openModal, closeModal } = useModal()
+ * openModal("confirm", { title: "Delete?" })  // ← autocomplete on name + data shape
+ */
+declare function createModalHook<T extends ModalRegistry>(_modals: T): () => {
+    /**
+     * Open a modal by name. The second argument must match the data
+     * interface of the registered component.
+     */
+    openModal: <K extends keyof T & string>(name: K, data?: ModalDataMap<T>[K]) => void;
+    closeModal: () => void;
+};
+
+/**
+ * Helper that returns its argument unchanged but enforces the ModalRegistry constraint.
+ * Use this when defining your MODALS object to get inference + type checking.
+ *
+ * @example
+ * export const MODALS = defineModals({
+ *   confirm: ConfirmModal,
+ *   upload:  UploadModal,
+ * })
+ */
+declare function defineModals<T extends ModalRegistry>(modals: T): T;
+
+export { type BaseModalProps, type ModalDataMap, ModalProvider, type ModalRegistry, createModalHook, defineModals };