@the_disreputable_doggo/password-gate 1.0.0 → 1.0.2

package/README.md

@@ -1,17 +1,17 @@
-# @pierandpixel/password-gate
+# @the_disreputable_doggo/password-gate
 
 A React component that provides a full-screen password gate for early access or pre-launch sites.
 
 ## Installation
 
 ```bash
-npm install @pierandpixel/password-gate
+npm install @the_disreputable_doggo/password-gate
 ```
 
 ## Usage
 
 ```tsx
-import PasswordGate from '@pierandpixel/password-gate';
+import PasswordGate from '@the_disreputable_doggo/password-gate';
 
 function App() {
   return (

package/dist/index.d.mts

@@ -15,6 +15,28 @@ interface PasswordGateProps {
     hidePasswordLabel?: string;
     unlockBodyClass?: string;
 }
+/**
+ * PasswordGate
+ *
+ * Why:
+ * Full-screen modal overlay that restricts site access during under-construction / staging phases.
+ * Validates user input against a configured password, persists unlock state in localStorage, and
+ * removes the locking CSS class from the document root.
+ *
+ * Inputs:
+ * - props: PasswordGateProps including localized copy strings, password, and unlock callback.
+ *
+ * Output:
+ * - JSX.Element | null (renders null if disabled or already unlocked).
+ *
+ * Edge cases & handling:
+ * - Accessibility landmark: Wraps the gate in <main id="main-content" role="main"> so automated audits
+ *   and screen readers detect a primary landmark when the site's normal content is locked out.
+ * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
+ *   to satisfy WCAG 2.5.5 minimum tap target requirements.
+ * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
+ * - Graceful exit: Triggers a smooth opacity fade-out before removing itself from the DOM tree.
+ */
 declare function PasswordGate({ title, subtitle, datePrefix, underConstruction, placeholder, buttonText, enabled, password, releaseDate, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
 
 export { type PasswordGateProps, PasswordGate as default };

package/dist/index.d.ts

@@ -15,6 +15,28 @@ interface PasswordGateProps {
     hidePasswordLabel?: string;
     unlockBodyClass?: string;
 }
+/**
+ * PasswordGate
+ *
+ * Why:
+ * Full-screen modal overlay that restricts site access during under-construction / staging phases.
+ * Validates user input against a configured password, persists unlock state in localStorage, and
+ * removes the locking CSS class from the document root.
+ *
+ * Inputs:
+ * - props: PasswordGateProps including localized copy strings, password, and unlock callback.
+ *
+ * Output:
+ * - JSX.Element | null (renders null if disabled or already unlocked).
+ *
+ * Edge cases & handling:
+ * - Accessibility landmark: Wraps the gate in <main id="main-content" role="main"> so automated audits
+ *   and screen readers detect a primary landmark when the site's normal content is locked out.
+ * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
+ *   to satisfy WCAG 2.5.5 minimum tap target requirements.
+ * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
+ * - Graceful exit: Triggers a smooth opacity fade-out before removing itself from the DOM tree.
+ */
 declare function PasswordGate({ title, subtitle, datePrefix, underConstruction, placeholder, buttonText, enabled, password, releaseDate, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
 
 export { type PasswordGateProps, PasswordGate as default };

package/dist/index.js

@@ -83,8 +83,10 @@ function PasswordGate({
     }
   };
   return /* @__PURE__ */ import_react.default.createElement(
-    "div",
+    "main",
     {
+      id: "main-content",
+      role: "main",
       className: `fixed inset-0 z-50 flex items-center justify-center bg-base transition-opacity duration-500 ${unlocked ? "opacity-0 pointer-events-none" : "opacity-100"}`
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "max-w-2xl px-6 text-center" }, /* @__PURE__ */ import_react.default.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-heading mb-6" }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: "text-lg text-body mb-8" }, subtitle), /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-surface p-8 rounded-xl shadow-lg inline-block border border-accent-muted" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "text-accent-muted font-bold mb-4" }, datePrefix, " ", releaseDate, " ", underConstruction), /* @__PURE__ */ import_react.default.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ import_react.default.createElement(
@@ -94,14 +96,14 @@ function PasswordGate({
         placeholder,
         value: passwordInput,
         onChange: (e) => setPasswordInput(e.target.value),
-        className: `w-full px-4 py-2 pr-10 bg-base border rounded text-body focus:outline-none focus:ring-2 focus:ring-accent transition-transform ${error ? "border-red-500 animate-[shake_0.5s_ease-in-out]" : "border-accent-muted"}`
+        className: `w-full px-4 py-2 pr-12 bg-base border rounded text-body focus:outline-none focus:ring-2 focus:ring-accent transition-transform ${error ? "border-red-500 animate-[shake_0.5s_ease-in-out]" : "border-accent-muted"}`
       }
     ), /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword(!showPassword),
-        className: "absolute inset-y-0 right-0 pr-3 flex items-center text-body hover:text-heading",
+        className: "pnp-pg-toggle-btn absolute inset-y-0 right-0 text-body hover:text-heading",
         "aria-label": showPassword ? hidePasswordLabel : showPasswordLabel
       },
       showPassword ? /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ import_react.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" })) : /* @__PURE__ */ import_react.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ import_react.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), /* @__PURE__ */ import_react.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }))
@@ -114,6 +116,15 @@ function PasswordGate({
       buttonText
     )))),
     /* @__PURE__ */ import_react.default.createElement("style", null, `
+        .pnp-pg-toggle-btn {
+          width: 44px !important;
+          height: 44px !important;
+          min-width: 44px !important;
+          min-height: 44px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        }
         @keyframes shake {
           0%, 100% { transform: translateX(0); }
           25% { transform: translateX(-5px); }

package/dist/index.mjs

@@ -50,8 +50,10 @@ function PasswordGate({
     }
   };
   return /* @__PURE__ */ React.createElement(
-    "div",
+    "main",
     {
+      id: "main-content",
+      role: "main",
       className: `fixed inset-0 z-50 flex items-center justify-center bg-base transition-opacity duration-500 ${unlocked ? "opacity-0 pointer-events-none" : "opacity-100"}`
     },
     /* @__PURE__ */ React.createElement("div", { className: "max-w-2xl px-6 text-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold text-heading mb-6" }, title), /* @__PURE__ */ React.createElement("p", { className: "text-lg text-body mb-8" }, subtitle), /* @__PURE__ */ React.createElement("div", { className: "bg-surface p-8 rounded-xl shadow-lg inline-block border border-accent-muted" }, /* @__PURE__ */ React.createElement("p", { className: "text-accent-muted font-bold mb-4" }, datePrefix, " ", releaseDate, " ", underConstruction), /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React.createElement(
@@ -61,14 +63,14 @@ function PasswordGate({
         placeholder,
         value: passwordInput,
         onChange: (e) => setPasswordInput(e.target.value),
-        className: `w-full px-4 py-2 pr-10 bg-base border rounded text-body focus:outline-none focus:ring-2 focus:ring-accent transition-transform ${error ? "border-red-500 animate-[shake_0.5s_ease-in-out]" : "border-accent-muted"}`
+        className: `w-full px-4 py-2 pr-12 bg-base border rounded text-body focus:outline-none focus:ring-2 focus:ring-accent transition-transform ${error ? "border-red-500 animate-[shake_0.5s_ease-in-out]" : "border-accent-muted"}`
       }
     ), /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
         onClick: () => setShowPassword(!showPassword),
-        className: "absolute inset-y-0 right-0 pr-3 flex items-center text-body hover:text-heading",
+        className: "pnp-pg-toggle-btn absolute inset-y-0 right-0 text-body hover:text-heading",
         "aria-label": showPassword ? hidePasswordLabel : showPasswordLabel
       },
       showPassword ? /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" })) : /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "w-5 h-5" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" }), /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }))
@@ -81,6 +83,15 @@ function PasswordGate({
       buttonText
     )))),
     /* @__PURE__ */ React.createElement("style", null, `
+        .pnp-pg-toggle-btn {
+          width: 44px !important;
+          height: 44px !important;
+          min-width: 44px !important;
+          min-height: 44px !important;
+          display: flex !important;
+          align-items: center !important;
+          justify-content: center !important;
+        }
         @keyframes shake {
           0%, 100% { transform: translateX(0); }
           25% { transform: translateX(-5px); }

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@the_disreputable_doggo/password-gate",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Password Gate component for Pier & Pixel templates",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "scripts": {
     "build": "tsup index.tsx --format cjs,esm --dts"
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:HadleySwello/password-gate.git"
+    "url": "git+https://github.com/HadleySwello/password-gate.git"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/index.tsx

@@ -1,139 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-export interface PasswordGateProps {
-  title: string;
-  subtitle: string;
-  datePrefix: string;
-  underConstruction: string;
-  placeholder: string;
-  buttonText: string;
-  enabled?: boolean;
-  password?: string;
-  releaseDate?: string;
-  onUnlock?: () => void;
-  showPasswordLabel?: string;
-  hidePasswordLabel?: string;
-  unlockBodyClass?: string;
-}
-
-export default function PasswordGate({ 
-  title, 
-  subtitle, 
-  datePrefix, 
-  underConstruction, 
-  placeholder, 
-  buttonText,
-  enabled = true,
-  password = '',
-  releaseDate = '',
-  onUnlock,
-  showPasswordLabel = 'Show password',
-  hidePasswordLabel = 'Hide password',
-  unlockBodyClass = 'locked'
-}: PasswordGateProps) {
-  const [passwordInput, setPasswordInput] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [error, setError] = useState(false);
-  const [unlocked, setUnlocked] = useState(false);
-  const [shouldRender, setShouldRender] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return localStorage.getItem('site_unlocked') !== 'true';
-    }
-    return true;
-  });
-
-  // If password protection is disabled, we don't render anything
-  if (!enabled) {
-    return null;
-  }
-
-  if (!shouldRender) return null;
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (passwordInput === password) {
-      setError(false);
-      setUnlocked(true);
-      localStorage.setItem('site_unlocked', 'true');
-      
-      if (unlockBodyClass && typeof document !== 'undefined') {
-        document.documentElement.classList.remove(unlockBodyClass);
-      }
-      
-      if (onUnlock) {
-        onUnlock();
-      }
-      
-      // Allow fade out animation to finish before removing from DOM
-      setTimeout(() => {
-        setShouldRender(false);
-      }, 500);
-    } else {
-      setError(true);
-      // Reset error after animation
-      setTimeout(() => setError(false), 500);
-    }
-  };
-
-  return (
-    <div 
-      className={`fixed inset-0 z-50 flex items-center justify-center bg-base transition-opacity duration-500 ${unlocked ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
-    >
-      <div className="max-w-2xl px-6 text-center">
-        <h1 className="text-4xl md:text-5xl font-bold text-heading mb-6">
-          {title}
-        </h1>
-        <p className="text-lg text-body mb-8">
-          {subtitle}
-        </p>
-        <div className="bg-surface p-8 rounded-xl shadow-lg inline-block border border-accent-muted">
-          <p className="text-accent-muted font-bold mb-4">
-            {datePrefix} {releaseDate} {underConstruction}
-          </p>
-          <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4">
-            <div className="relative w-full">
-              <input
-                type={showPassword ? "text" : "password"}
-                placeholder={placeholder}
-                value={passwordInput}
-                onChange={(e) => setPasswordInput(e.target.value)}
-                className={`w-full px-4 py-2 pr-10 bg-base border rounded text-body focus:outline-none focus:ring-2 focus:ring-accent transition-transform ${error ? 'border-red-500 animate-[shake_0.5s_ease-in-out]' : 'border-accent-muted'}`}
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute inset-y-0 right-0 pr-3 flex items-center text-body hover:text-heading"
-                aria-label={showPassword ? hidePasswordLabel : showPasswordLabel}
-              >
-                {showPassword ? (
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
-                  </svg>
-                ) : (
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  </svg>
-                )}
-              </button>
-            </div>
-            <button
-              type="submit"
-              className="px-6 py-2 bg-accent-muted text-white rounded font-semibold transition-colors"
-            >
-              {buttonText}
-            </button>
-          </form>
-        </div>
-      </div>
-      <style>{`
-        @keyframes shake {
-          0%, 100% { transform: translateX(0); }
-          25% { transform: translateX(-5px); }
-          50% { transform: translateX(5px); }
-          75% { transform: translateX(-5px); }
-        }
-      `}</style>
-    </div>
-  );
-}

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
-    "moduleResolution": "node",
-    "jsx": "react",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "emitDeclarationOnly": true
-  },
-  "include": ["index.tsx"]
-}