@the_disreputable_doggo/password-gate 1.1.0 → 1.1.1

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 +1 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +16 -2
  4. package/dist/index.mjs +16 -2
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -43,6 +43,7 @@ interface PasswordGateProps {
43
43
  * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
44
44
  * to satisfy WCAG 2.5.5 minimum tap target requirements.
45
45
  * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
46
+ * - Scoped styling: Uses explicit scoped classes (.pnp-pg-submit-btn, .pnp-pg-card, .pnp-pg-message) with CSS variable fallbacks so buttons and cards retain contrast even if consumer Tailwind purges external package utility classes.
46
47
  * - Graceful exit: Triggers an opacity fade-out before removing itself from the DOM tree.
47
48
  */
48
49
  declare function PasswordGate({ title, subtitle, message, datePrefix, underConstruction, releaseDate, placeholder, buttonText, enabled, password, lang, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -43,6 +43,7 @@ interface PasswordGateProps {
43
43
  * - Mobile touch targets: The eye toggle button is explicitly sized to 44x44px (w-11 h-11)
44
44
  * to satisfy WCAG 2.5.5 minimum tap target requirements.
45
45
  * - LocalStorage sync: Checks localStorage on initial load to avoid flash of locked state if previously unlocked.
46
+ * - Scoped styling: Uses explicit scoped classes (.pnp-pg-submit-btn, .pnp-pg-card, .pnp-pg-message) with CSS variable fallbacks so buttons and cards retain contrast even if consumer Tailwind purges external package utility classes.
46
47
  * - Graceful exit: Triggers an opacity fade-out before removing itself from the DOM tree.
47
48
  */
48
49
  declare function PasswordGate({ title, subtitle, message, datePrefix, underConstruction, releaseDate, placeholder, buttonText, enabled, password, lang, onUnlock, showPasswordLabel, hidePasswordLabel, unlockBodyClass }: PasswordGateProps): React.JSX.Element;
package/dist/index.js CHANGED
@@ -101,7 +101,7 @@ function PasswordGate({
101
101
  role: "main",
102
102
  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"}`
103
103
  },
104
- /* @__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" }, getDisplayMessage()), /* @__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(
104
+ /* @__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: "pnp-pg-card bg-surface p-8 rounded-xl shadow-lg inline-block border border-accent-muted" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "pnp-pg-message text-accent-muted font-bold mb-4" }, getDisplayMessage()), /* @__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(
105
105
  "input",
106
106
  {
107
107
  type: showPassword ? "text" : "password",
@@ -123,7 +123,7 @@ function PasswordGate({
123
123
  "button",
124
124
  {
125
125
  type: "submit",
126
- className: "px-6 py-2 bg-accent-muted text-white rounded font-semibold transition-colors"
126
+ className: "pnp-pg-submit-btn px-6 py-2 bg-accent-muted text-white rounded font-semibold transition-colors"
127
127
  },
128
128
  buttonText
129
129
  )))),
@@ -137,6 +137,20 @@ function PasswordGate({
137
137
  align-items: center !important;
138
138
  justify-content: center !important;
139
139
  }
140
+ .pnp-pg-submit-btn {
141
+ background-color: var(--color-accent-muted, var(--accent-muted, #115e54)) !important;
142
+ color: #ffffff !important;
143
+ cursor: pointer;
144
+ }
145
+ .pnp-pg-submit-btn:hover {
146
+ opacity: 0.9;
147
+ }
148
+ .pnp-pg-card {
149
+ border-color: var(--color-accent-muted, var(--accent-muted, #115e54));
150
+ }
151
+ .pnp-pg-message {
152
+ color: var(--color-accent-muted, var(--accent-muted, #115e54));
153
+ }
140
154
  @keyframes shake {
141
155
  0%, 100% { transform: translateX(0); }
142
156
  25% { transform: translateX(-5px); }
package/dist/index.mjs CHANGED
@@ -68,7 +68,7 @@ function PasswordGate({
68
68
  role: "main",
69
69
  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"}`
70
70
  },
71
- /* @__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" }, getDisplayMessage()), /* @__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(
71
+ /* @__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: "pnp-pg-card bg-surface p-8 rounded-xl shadow-lg inline-block border border-accent-muted" }, /* @__PURE__ */ React.createElement("p", { className: "pnp-pg-message text-accent-muted font-bold mb-4" }, getDisplayMessage()), /* @__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(
72
72
  "input",
73
73
  {
74
74
  type: showPassword ? "text" : "password",
@@ -90,7 +90,7 @@ function PasswordGate({
90
90
  "button",
91
91
  {
92
92
  type: "submit",
93
- className: "px-6 py-2 bg-accent-muted text-white rounded font-semibold transition-colors"
93
+ className: "pnp-pg-submit-btn px-6 py-2 bg-accent-muted text-white rounded font-semibold transition-colors"
94
94
  },
95
95
  buttonText
96
96
  )))),
@@ -104,6 +104,20 @@ function PasswordGate({
104
104
  align-items: center !important;
105
105
  justify-content: center !important;
106
106
  }
107
+ .pnp-pg-submit-btn {
108
+ background-color: var(--color-accent-muted, var(--accent-muted, #115e54)) !important;
109
+ color: #ffffff !important;
110
+ cursor: pointer;
111
+ }
112
+ .pnp-pg-submit-btn:hover {
113
+ opacity: 0.9;
114
+ }
115
+ .pnp-pg-card {
116
+ border-color: var(--color-accent-muted, var(--accent-muted, #115e54));
117
+ }
118
+ .pnp-pg-message {
119
+ color: var(--color-accent-muted, var(--accent-muted, #115e54));
120
+ }
107
121
  @keyframes shake {
108
122
  0%, 100% { transform: translateX(0); }
109
123
  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.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Password Gate component for Pier & Pixel templates",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",