jdc-react-mailer 0.1.0

package/dist/style.css

@@ -0,0 +1,257 @@
+/* jdc-react-mailer — themeable via CSS custom properties */
+
+.jdcm-root {
+  --jdcm-primary: #0070f3;
+  --jdcm-primary-hover: #005bb5;
+  --jdcm-bg: #ffffff;
+  --jdcm-surface: #f9fafb;
+  --jdcm-border: #e2e8f0;
+  --jdcm-text: #1a202c;
+  --jdcm-muted: #718096;
+  --jdcm-error: #e53e3e;
+  --jdcm-success: #38a169;
+  --jdcm-radius: 8px;
+  --jdcm-spacing: 1rem;
+  --jdcm-font: inherit;
+  --jdcm-transition: 0.2s ease;
+  --jdcm-focus-ring: 2px solid var(--jdcm-primary);
+  --jdcm-focus-offset: 2px;
+
+  font-family: var(--jdcm-font);
+  color: var(--jdcm-text);
+  background: var(--jdcm-bg);
+  padding: var(--jdcm-spacing);
+  border-radius: var(--jdcm-radius);
+  box-sizing: border-box;
+}
+
+.jdcm-root *,
+.jdcm-root *::before,
+.jdcm-root *::after {
+  box-sizing: border-box;
+}
+
+/* Form layout */
+.jdcm-form {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--jdcm-spacing) * 1.25);
+}
+
+/* Field group */
+.jdcm-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.jdcm-field label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--jdcm-text);
+}
+
+.jdcm-field input,
+.jdcm-field textarea {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  font-family: var(--jdcm-font);
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--jdcm-text);
+  background: var(--jdcm-surface);
+  border: 1px solid var(--jdcm-border);
+  border-radius: var(--jdcm-radius);
+  transition: border-color var(--jdcm-transition), box-shadow var(--jdcm-transition);
+}
+
+.jdcm-field input::placeholder,
+.jdcm-field textarea::placeholder {
+  color: var(--jdcm-muted);
+}
+
+.jdcm-field input:hover,
+.jdcm-field textarea:hover {
+  border-color: color-mix(in srgb, var(--jdcm-primary) 30%, var(--jdcm-border));
+}
+
+.jdcm-field input:focus,
+.jdcm-field textarea:focus {
+  outline: none;
+  border-color: var(--jdcm-primary);
+  box-shadow: 0 0 0 var(--jdcm-focus-offset) var(--jdcm-primary);
+}
+
+.jdcm-field input:focus-visible,
+.jdcm-field textarea:focus-visible {
+  outline: var(--jdcm-focus-ring);
+  outline-offset: var(--jdcm-focus-offset);
+}
+
+.jdcm-field input[aria-invalid="true"],
+.jdcm-field textarea[aria-invalid="true"] {
+  border-color: var(--jdcm-error);
+}
+
+.jdcm-field input[aria-invalid="true"]:focus,
+.jdcm-field textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 var(--jdcm-focus-offset) var(--jdcm-error);
+}
+
+.jdcm-field textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+/* Honeypot: visually hidden, not display:none for better spam behavior */
+.jdcm-hp {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Error message */
+.jdcm-error-msg {
+  font-size: 0.8125rem;
+  color: var(--jdcm-error);
+  margin-top: 0.125rem;
+}
+
+/* Submit button */
+.jdcm-submit {
+  align-self: flex-start;
+  padding: 0.625rem 1.25rem;
+  font-family: var(--jdcm-font);
+  font-size: 1rem;
+  font-weight: 500;
+  color: #fff;
+  background: var(--jdcm-primary);
+  border: none;
+  border-radius: var(--jdcm-radius);
+  cursor: pointer;
+  transition: background-color var(--jdcm-transition), transform var(--jdcm-transition);
+}
+
+.jdcm-submit:hover:not(:disabled) {
+  background: var(--jdcm-primary-hover);
+}
+
+.jdcm-submit:focus-visible {
+  outline: var(--jdcm-focus-ring);
+  outline-offset: var(--jdcm-focus-offset);
+}
+
+.jdcm-submit:disabled {
+  cursor: not-allowed;
+  opacity: 0.8;
+}
+
+/* Loading spinner */
+.jdcm-spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.5em;
+  vertical-align: -0.15em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: jdcm-spin 0.6s linear infinite;
+}
+
+@keyframes jdcm-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Success message */
+.jdcm-success-msg {
+  padding: var(--jdcm-spacing);
+  font-size: 1rem;
+  color: var(--jdcm-success);
+  background: color-mix(in srgb, var(--jdcm-success) 12%, transparent);
+  border-radius: var(--jdcm-radius);
+  animation: jdcm-slide-in 0.3s ease;
+}
+
+@keyframes jdcm-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Error banner */
+.jdcm-error-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--jdcm-spacing);
+  padding: var(--jdcm-spacing);
+  font-size: 0.9375rem;
+  color: var(--jdcm-error);
+  background: color-mix(in srgb, var(--jdcm-error) 12%, transparent);
+  border-radius: var(--jdcm-radius);
+  animation: jdcm-slide-in 0.3s ease;
+}
+
+.jdcm-error-banner button {
+  flex-shrink: 0;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--jdcm-font);
+  font-size: 0.875rem;
+  color: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--jdcm-radius);
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+.jdcm-error-banner button:hover {
+  opacity: 1;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .jdcm-root {
+    --jdcm-transition: 0s;
+  }
+
+  .jdcm-field input,
+  .jdcm-field textarea,
+  .jdcm-submit {
+    transition: none;
+  }
+
+  .jdcm-spinner {
+    animation-duration: 1.2s;
+  }
+
+  .jdcm-success-msg,
+  .jdcm-error-banner {
+    animation: none;
+  }
+}
+
+/* Dark mode support (optional; consumer can override variables) */
+@media (prefers-color-scheme: dark) {
+  .jdcm-root:not([data-theme-set]) {
+    --jdcm-bg: #1a202c;
+    --jdcm-surface: #2d3748;
+    --jdcm-border: #4a5568;
+    --jdcm-text: #f7fafc;
+    --jdcm-muted: #a0aec0;
+  }
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "jdc-react-mailer",
+  "version": "0.1.0",
+  "description": "Reusable, themeable React contact form with Next.js handler and Nodemailer",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./handler": {
+      "types": "./dist/handler/index.d.ts",
+      "import": "./dist/handler/index.js",
+      "require": "./dist/handler/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "peerDependencies": {
+    "next": ">=14",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "nodemailer": "^8.0.1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.2.3",
+    "@types/nodemailer": "^7.0.10",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^10.0.0",
+    "happy-dom": "^20.6.2",
+    "next": "^16.1.6",
+    "prettier": "^3.8.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.0",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsup && cp src/components/ContactForm/ContactForm.css dist/style.css",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "lint": "eslint src --ext .ts,.tsx",
+    "format": "prettier --write src"
+  }
+}