@the_disreputable_doggo/password-gate 1.0.0 → 1.0.1

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/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@the_disreputable_doggo/password-gate",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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"]
-}