@the_disreputable_doggo/password-gate 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +22 -0
  2. package/dist/index.d.ts +22 -0
  3. package/dist/index.js +14 -3
  4. package/dist/index.mjs +14 -3
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -15,6 +15,28 @@ interface PasswordGateProps {
15
15
  hidePasswordLabel?: string;
16
16
  unlockBodyClass?: string;
17
17
  }
18
+ /**
19
+ * PasswordGate
20
+ *
21
+ * Why:
22
+ * Full-screen modal overlay that restricts site access during under-construction / staging phases.
23
+ * Validates user input against a configured password, persists unlock state in localStorage, and
24
+ * removes the locking CSS class from the document root.
25
+ *
26
+ * Inputs:
27
+ * - props: PasswordGateProps including localized copy strings, password, and unlock callback.
28
+ *
29
+ * Output:
30
+ * - JSX.Element | null (renders null if disabled or already unlocked).
31
+ *
32
+ * Edge cases & handling:
33
+ * - Accessibility landmark: Wraps the gate in <main id="main-content" role="main"> so automated audits
34
+ * and screen readers detect a primary landmark when the site's normal content is locked out.
35
+ * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
36
+ * to satisfy WCAG 2.5.5 minimum tap target requirements.
37
+ * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
38
+ * - Graceful exit: Triggers a smooth opacity fade-out before removing itself from the DOM tree.
39
+ */
18
40
  declare function PasswordGate({ title, subtitle, datePrefix, underConstruction, placeholder, buttonText, enabled, password, releaseDate, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
19
41
 
20
42
  export { type PasswordGateProps, PasswordGate as default };
package/dist/index.d.ts CHANGED
@@ -15,6 +15,28 @@ interface PasswordGateProps {
15
15
  hidePasswordLabel?: string;
16
16
  unlockBodyClass?: string;
17
17
  }
18
+ /**
19
+ * PasswordGate
20
+ *
21
+ * Why:
22
+ * Full-screen modal overlay that restricts site access during under-construction / staging phases.
23
+ * Validates user input against a configured password, persists unlock state in localStorage, and
24
+ * removes the locking CSS class from the document root.
25
+ *
26
+ * Inputs:
27
+ * - props: PasswordGateProps including localized copy strings, password, and unlock callback.
28
+ *
29
+ * Output:
30
+ * - JSX.Element | null (renders null if disabled or already unlocked).
31
+ *
32
+ * Edge cases & handling:
33
+ * - Accessibility landmark: Wraps the gate in <main id="main-content" role="main"> so automated audits
34
+ * and screen readers detect a primary landmark when the site's normal content is locked out.
35
+ * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
36
+ * to satisfy WCAG 2.5.5 minimum tap target requirements.
37
+ * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
38
+ * - Graceful exit: Triggers a smooth opacity fade-out before removing itself from the DOM tree.
39
+ */
18
40
  declare function PasswordGate({ title, subtitle, datePrefix, underConstruction, placeholder, buttonText, enabled, password, releaseDate, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
19
41
 
20
42
  export { type PasswordGateProps, PasswordGate as default };
package/dist/index.js CHANGED
@@ -83,8 +83,10 @@ function PasswordGate({
83
83
  }
84
84
  };
85
85
  return /* @__PURE__ */ import_react.default.createElement(
86
- "div",
86
+ "main",
87
87
  {
88
+ id: "main-content",
89
+ role: "main",
88
90
  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"}`
89
91
  },
90
92
  /* @__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({
94
96
  placeholder,
95
97
  value: passwordInput,
96
98
  onChange: (e) => setPasswordInput(e.target.value),
97
- 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"}`
99
+ 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"}`
98
100
  }
99
101
  ), /* @__PURE__ */ import_react.default.createElement(
100
102
  "button",
101
103
  {
102
104
  type: "button",
103
105
  onClick: () => setShowPassword(!showPassword),
104
- className: "absolute inset-y-0 right-0 pr-3 flex items-center text-body hover:text-heading",
106
+ className: "pnp-pg-toggle-btn absolute inset-y-0 right-0 text-body hover:text-heading",
105
107
  "aria-label": showPassword ? hidePasswordLabel : showPasswordLabel
106
108
  },
107
109
  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({
114
116
  buttonText
115
117
  )))),
116
118
  /* @__PURE__ */ import_react.default.createElement("style", null, `
119
+ .pnp-pg-toggle-btn {
120
+ width: 44px !important;
121
+ height: 44px !important;
122
+ min-width: 44px !important;
123
+ min-height: 44px !important;
124
+ display: flex !important;
125
+ align-items: center !important;
126
+ justify-content: center !important;
127
+ }
117
128
  @keyframes shake {
118
129
  0%, 100% { transform: translateX(0); }
119
130
  25% { transform: translateX(-5px); }
package/dist/index.mjs CHANGED
@@ -50,8 +50,10 @@ function PasswordGate({
50
50
  }
51
51
  };
52
52
  return /* @__PURE__ */ React.createElement(
53
- "div",
53
+ "main",
54
54
  {
55
+ id: "main-content",
56
+ role: "main",
55
57
  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"}`
56
58
  },
57
59
  /* @__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({
61
63
  placeholder,
62
64
  value: passwordInput,
63
65
  onChange: (e) => setPasswordInput(e.target.value),
64
- 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"}`
66
+ 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"}`
65
67
  }
66
68
  ), /* @__PURE__ */ React.createElement(
67
69
  "button",
68
70
  {
69
71
  type: "button",
70
72
  onClick: () => setShowPassword(!showPassword),
71
- className: "absolute inset-y-0 right-0 pr-3 flex items-center text-body hover:text-heading",
73
+ className: "pnp-pg-toggle-btn absolute inset-y-0 right-0 text-body hover:text-heading",
72
74
  "aria-label": showPassword ? hidePasswordLabel : showPasswordLabel
73
75
  },
74
76
  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({
81
83
  buttonText
82
84
  )))),
83
85
  /* @__PURE__ */ React.createElement("style", null, `
86
+ .pnp-pg-toggle-btn {
87
+ width: 44px !important;
88
+ height: 44px !important;
89
+ min-width: 44px !important;
90
+ min-height: 44px !important;
91
+ display: flex !important;
92
+ align-items: center !important;
93
+ justify-content: center !important;
94
+ }
84
95
  @keyframes shake {
85
96
  0%, 100% { transform: translateX(0); }
86
97
  25% { transform: translateX(-5px); }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@the_disreputable_doggo/password-gate",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "Password Gate component for Pier & Pixel templates",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",