modal-system 1.0.0 → 1.0.1

package/dist/cli/index.js

@@ -688,7 +688,9 @@ async function main() {
     message: "Which UI library are you using?",
     options: [
       { value: "shadcn", label: "shadcn/ui" },
-      { value: "daisyui", label: "DaisyUI" }
+      { value: "daisyui", label: "DaisyUI" },
+      { value: "chakra", label: "Chakra UI" },
+      { value: "ark", label: "Ark UI" }
     ]
   });
   if (lD(uiLibrary)) {
@@ -710,7 +712,7 @@ async function main() {
     }
     variant = `shadcn-${primitive}`;
   } else {
-    variant = "daisyui";
+    variant = uiLibrary;
   }
   const modalsDir = await te({
     message: "Where should the modals folder be created?",
@@ -756,7 +758,7 @@ async function main() {
   le(
     [
       `${import_picocolors3.default.bold("1.")} Install dependencies:`,
-      uiLibrary === "daisyui" ? import_picocolors3.default.cyan("   bun add zustand daisyui") : variant === "shadcn-radix" ? import_picocolors3.default.cyan("   bun add zustand @radix-ui/react-dialog") : import_picocolors3.default.cyan("   bun add zustand @base-ui-components/react"),
+      uiLibrary === "daisyui" ? import_picocolors3.default.cyan("   bun add zustand daisyui") : uiLibrary === "chakra" ? import_picocolors3.default.cyan("   bun add zustand @chakra-ui/react @emotion/react") : uiLibrary === "ark" ? import_picocolors3.default.cyan("   bun add zustand @ark-ui/react") : variant === "shadcn-radix" ? import_picocolors3.default.cyan("   bun add zustand @radix-ui/react-dialog") : import_picocolors3.default.cyan("   bun add zustand @base-ui-components/react"),
       "",
       `${import_picocolors3.default.bold("2.")} Wrap your app in the provider:`,
       import_picocolors3.default.cyan(`   import { ModalProvider } from "modal-system"`),

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

@@ -0,0 +1,74 @@
+/**
+ * ConfirmModal.tsx  (Ark UI)
+ *
+ * Ark UI is headless — the markup below is styled with Tailwind classes.
+ *   bun add @ark-ui/react
+ */
+
+import { Dialog } from "@ark-ui/react/dialog";
+import { Portal } from "@ark-ui/react/portal";
+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={(e) => !e.open && handleClose()}
+    >
+      <Portal>
+        <Dialog.Backdrop className="fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=closed]:opacity-0 data-[state=open]:opacity-100" />
+
+        <Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content className="relative w-full max-w-md min-h-40 rounded-lg bg-white p-6 shadow-lg transition-all data-[state=closed]:opacity-0 data-[state=closed]:scale-95 data-[state=open]:opacity-100 dark:bg-zinc-900">
+            <div className="flex flex-col gap-1">
+              <Dialog.Title className="text-lg font-semibold">
+                {data?.title ?? "Are you sure?"}
+              </Dialog.Title>
+              {data?.description && (
+                <Dialog.Description className="text-xs text-zinc-500 dark:text-zinc-400">
+                  {data.description}
+                </Dialog.Description>
+              )}
+            </div>
+
+            <div className="absolute bottom-3 right-3 flex gap-1">
+              <Dialog.CloseTrigger
+                className="inline-flex h-9 items-center justify-center rounded-md bg-zinc-100 px-4 text-sm font-medium text-zinc-900 shadow-sm transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700"
+                onClick={handleClose}
+              >
+                {data?.closeText ?? "Cancel"}
+              </Dialog.CloseTrigger>
+
+              <button
+                type="button"
+                onClick={handleConfirm}
+                className={`inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium text-white shadow transition-colors ${
+                  data?.isActionButtonDestructive
+                    ? "bg-red-600 hover:bg-red-700"
+                    : "bg-blue-600 hover:bg-blue-700"
+                }`}
+              >
+                {data?.actionText ?? "Confirm"}
+              </button>
+            </div>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}

package/dist/cli/templates/ark/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/ark/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/cli/templates/chakra/ConfirmModal.tsx.tpl

@@ -0,0 +1,75 @@
+/**
+ * ConfirmModal.tsx  (Chakra UI v3)
+ *
+ * Uses the Chakra UI v3 Dialog component:
+ *   bun add @chakra-ui/react @emotion/react
+ */
+
+import {
+  Dialog,
+  Portal,
+  Button,
+  CloseButton,
+  Text,
+} from "@chakra-ui/react";
+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={(e) => !e.open && handleClose()}
+      placement="center"
+    >
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>{data?.title ?? "Are you sure?"}</Dialog.Title>
+            </Dialog.Header>
+
+            {data?.description && (
+              <Dialog.Body>
+                <Text fontSize="sm" color="fg.muted">
+                  {data.description}
+                </Text>
+              </Dialog.Body>
+            )}
+
+            <Dialog.Footer>
+              <Button variant="outline" onClick={handleClose}>
+                {data?.closeText ?? "Cancel"}
+              </Button>
+              <Button
+                colorPalette={data?.isActionButtonDestructive ? "red" : "blue"}
+                onClick={handleConfirm}
+              >
+                {data?.actionText ?? "Confirm"}
+              </Button>
+            </Dialog.Footer>
+
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" onClick={handleClose} />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  );
+}

package/dist/cli/templates/chakra/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/chakra/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) color palette */
+  isActionButtonDestructive?: boolean;
+}
+
+// Example of another modal:
+// export interface DeleteUserModalData {
+//   userId: string;
+//   userName: string;
+//   onDeleted?: () => void;
+// }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "modal-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Type-safe modal management system for React with DaisyUI and shadcn/ui support",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",