@greghowe79/the-lib 1.5.9 → 1.6.1

package/lib/components/hero/styles.css.qwik.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles = "/* .hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 4);\r\n  font-weight: 700;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1.125);\r\n  font-weight: 400;\r\n  margin-bottom: 1.875rem;\r\n  color: #333;\r\n} */\r\n\r\n/* mobile-first: regole di base pensate per smartphone */\r\n.hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 3.5rem 1.25rem; /* padding più piccolo su mobile */\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 3); /* base per smartphone */\r\n  font-weight: 700;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1); /* magari leggermente più piccolo su mobile */\r\n  font-weight: 400;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n/* tablet e desktop: aumenta dimensioni e padding */\r\n@media (min-width: 481px) {\r\n  .hero {\r\n    padding: 6.25rem 1.25rem; /* padding originale per tablet/desktop */\r\n  }\r\n\r\n  .hero h1 {\r\n    font-size: calc(1rem * 4); /* valore per tablet e oltre */\r\n  }\r\n\r\n  .hero p {\r\n    font-size: calc(1rem * 1.125);\r\n    margin-bottom: 1.875rem;\r\n  }\r\n}\r\n";
+const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 3);\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1);\r\n  font-weight: 400;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n  .hero {\r\n    padding: 6.25rem 1.25rem;\r\n  }\r\n\r\n  .hero h1 {\r\n    font-size: calc(1rem * 4);\r\n  }\r\n\r\n  .hero p {\r\n    font-size: calc(1rem * 1.125);\r\n    margin-bottom: 1.875rem;\r\n  }\r\n}\r\n";
 module.exports = styles;

package/lib/components/hero/styles.css.qwik.mjs

@@ -1,4 +1,4 @@
-const styles = "/* .hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 4);\r\n  font-weight: 700;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1.125);\r\n  font-weight: 400;\r\n  margin-bottom: 1.875rem;\r\n  color: #333;\r\n} */\r\n\r\n/* mobile-first: regole di base pensate per smartphone */\r\n.hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 3.5rem 1.25rem; /* padding più piccolo su mobile */\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 3); /* base per smartphone */\r\n  font-weight: 700;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1); /* magari leggermente più piccolo su mobile */\r\n  font-weight: 400;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n/* tablet e desktop: aumenta dimensioni e padding */\r\n@media (min-width: 481px) {\r\n  .hero {\r\n    padding: 6.25rem 1.25rem; /* padding originale per tablet/desktop */\r\n  }\r\n\r\n  .hero h1 {\r\n    font-size: calc(1rem * 4); /* valore per tablet e oltre */\r\n  }\r\n\r\n  .hero p {\r\n    font-size: calc(1rem * 1.125);\r\n    margin-bottom: 1.875rem;\r\n  }\r\n}\r\n";
+const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: #f5f5f7;\r\n  text-align: center;\r\n  padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: calc(1rem * 3);\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n.hero p {\r\n  font-size: calc(1rem * 1);\r\n  font-weight: 400;\r\n  margin-bottom: 1.25rem;\r\n  color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n  .hero {\r\n    padding: 6.25rem 1.25rem;\r\n  }\r\n\r\n  .hero h1 {\r\n    font-size: calc(1rem * 4);\r\n  }\r\n\r\n  .hero p {\r\n    font-size: calc(1rem * 1.125);\r\n    margin-bottom: 1.875rem;\r\n  }\r\n}\r\n";
 export {
   styles as default
 };

package/lib/components/input/input.qwik.cjs

@@ -26,10 +26,14 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete }) => {
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password" }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
+  const isPasswordVisible = qwik.useSignal(false);
   const showError = error ?? internalError;
+  const togglePasswordVisibility = qwik.$(() => {
+    isPasswordVisible.value = !isPasswordVisible.value;
+  });
   const inputHandler = qwik.$(async (_, elem) => {
     if (type === "number") {
       if (value) value.value = elem.value;
@@ -68,6 +72,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
       if (!error) internalError.value = result;
     }
   });
+  const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "input-container",
     children: [
@@ -126,6 +131,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
               }),
               /* @__PURE__ */ jsxRuntime.jsx("input", {
                 id,
+                name: id,
                 type,
                 inputMode: "tel",
                 pattern: "[0-9]*",
@@ -160,6 +166,44 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
             children: label
           })
         ]
+      }) : type === "password" ? /* @__PURE__ */ jsxRuntime.jsxs("label", {
+        class: `input-label ${bgLight ? "bg_light" : ""}`,
+        for: id,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", {
+            class: "sr-only",
+            children: label
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: "input-wrapper",
+            children: [
+              (icon || iconPasswordShow || iconPasswordHide) && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                class: "input-icon",
+                "aria-hidden": "true",
+                children: typeof icon === "function" ? icon({}, null, 0) : icon
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("input", {
+                id,
+                name: id,
+                type: effectiveType,
+                class: `input ${showError.value ? "error" : ""}`,
+                placeholder,
+                "bind:value": value,
+                onInput$: inputHandler,
+                onBlur$: inputHandler,
+                required,
+                autocomplete
+              }),
+              (iconPasswordShow || iconPasswordHide) && /* @__PURE__ */ jsxRuntime.jsx("button", {
+                type: "button",
+                class: "password-toggle-btn",
+                onClick$: togglePasswordVisibility,
+                "aria-label": isPasswordVisible.value ? labelHidePassword : labelShowPassword,
+                children: isPasswordVisible.value ? typeof iconPasswordShow === "function" ? iconPasswordShow({}, null, 0) : iconPasswordShow : typeof iconPasswordHide === "function" ? iconPasswordHide({}, null, 0) : iconPasswordHide
+              })
+            ]
+          })
+        ]
       }) : /* @__PURE__ */ jsxRuntime.jsxs("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         for: id,
@@ -178,6 +222,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
               }),
               /* @__PURE__ */ jsxRuntime.jsx("input", {
                 id,
+                name: id,
                 type,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,

package/lib/components/input/input.qwik.mjs

@@ -24,10 +24,14 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete }) => {
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, imgUrl, autocomplete, iconPasswordShow, iconPasswordHide, labelShowPassword = "Show password", labelHidePassword = "Hide password" }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
+  const isPasswordVisible = useSignal(false);
   const showError = error ?? internalError;
+  const togglePasswordVisibility = $(() => {
+    isPasswordVisible.value = !isPasswordVisible.value;
+  });
   const inputHandler = $(async (_, elem) => {
     if (type === "number") {
       if (value) value.value = elem.value;
@@ -66,6 +70,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
       if (!error) internalError.value = result;
     }
   });
+  const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
   return /* @__PURE__ */ jsxs("div", {
     class: "input-container",
     children: [
@@ -124,6 +129,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
               }),
               /* @__PURE__ */ jsx("input", {
                 id,
+                name: id,
                 type,
                 inputMode: "tel",
                 pattern: "[0-9]*",
@@ -158,6 +164,44 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
             children: label
           })
         ]
+      }) : type === "password" ? /* @__PURE__ */ jsxs("label", {
+        class: `input-label ${bgLight ? "bg_light" : ""}`,
+        for: id,
+        children: [
+          label && /* @__PURE__ */ jsx("span", {
+            class: "sr-only",
+            children: label
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "input-wrapper",
+            children: [
+              (icon || iconPasswordShow || iconPasswordHide) && /* @__PURE__ */ jsx("span", {
+                class: "input-icon",
+                "aria-hidden": "true",
+                children: typeof icon === "function" ? icon({}, null, 0) : icon
+              }),
+              /* @__PURE__ */ jsx("input", {
+                id,
+                name: id,
+                type: effectiveType,
+                class: `input ${showError.value ? "error" : ""}`,
+                placeholder,
+                "bind:value": value,
+                onInput$: inputHandler,
+                onBlur$: inputHandler,
+                required,
+                autocomplete
+              }),
+              (iconPasswordShow || iconPasswordHide) && /* @__PURE__ */ jsx("button", {
+                type: "button",
+                class: "password-toggle-btn",
+                onClick$: togglePasswordVisibility,
+                "aria-label": isPasswordVisible.value ? labelHidePassword : labelShowPassword,
+                children: isPasswordVisible.value ? typeof iconPasswordShow === "function" ? iconPasswordShow({}, null, 0) : iconPasswordShow : typeof iconPasswordHide === "function" ? iconPasswordHide({}, null, 0) : iconPasswordHide
+              })
+            ]
+          })
+        ]
       }) : /* @__PURE__ */ jsxs("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         for: id,
@@ -176,6 +220,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
               }),
               /* @__PURE__ */ jsx("input", {
                 id,
+                name: id,
                 type,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,

package/lib/components/input/styles.css.qwik.cjs

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n";
+const styles = ".input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n";
 module.exports = styles;

package/lib/components/input/styles.css.qwik.mjs

@@ -1,4 +1,4 @@
-const styles = ".input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n";
+const styles = ".input-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n  font-size: 0.8125rem;\r\n  line-height: 1.85;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  position: relative;\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 0.9375rem;\r\n  flex: 1;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  width: calc(100% - 0.9375rem * 2);\r\n}\r\n\r\n.input::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.input-label {\r\n  border-radius: 0.75rem;\r\n  transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 1rem;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n  display: flex;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  border-radius: 0.75rem 0 0 0.75rem;\r\n  height: 3.29412rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.29412rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.75rem 0.75rem 0;\r\n  color: #333;\r\n  letter-spacing: 0.0625rem;\r\n  font-size: 0.875rem;\r\n  width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n  margin: 0;\r\n  border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n  position: absolute;\r\n  width: 0.0625rem;\r\n  height: 0.0625rem;\r\n  padding: 0;\r\n  margin: -0.0625rem;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.input-label {\r\n  cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n  cursor: pointer;\r\n  width: 6.25rem;\r\n  color: #fff;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n  background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  width: 100%;\r\n  padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n  padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n  width: 100%;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n  -webkit-appearance: none;\r\n  margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n  -moz-appearance: textfield;\r\n  appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n  position: absolute;\r\n  right: 12px;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: inherit;\r\n  opacity: 0.6;\r\n  transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n  outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n  position: relative;\r\n}\r\n";
 export {
   styles as default
 };

package/lib-types/components/input/input.d.ts

@@ -23,6 +23,10 @@ export interface InputProps {
     label?: string;
     selectedValue?: Signal<string>;
     autocomplete?: AutoFill;
+    iconPasswordShow?: JSXOutput | Component<unknown>;
+    iconPasswordHide?: JSXOutput | Component<unknown>;
+    labelShowPassword?: string;
+    labelHidePassword?: string;
 }
 export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
 export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;

package/lib-types/stories/input.stories.d.ts

@@ -9,3 +9,7 @@ export declare const InputWithIcon: Story;
 export declare const PhoneInput: Story;
 export declare const FileUpload: Story;
 export declare const InputNumber: Story;
+export declare const PasswordWithToggle: Story;
+export declare const EmailAutocomplete: Story;
+export declare const PasswordAutocomplete: Story;
+export declare const LoginFormComplete: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "1.5.9",
+  "version": "1.6.1",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",