@greghowe79/the-lib 2.13.4 → 2.13.6

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

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".card {\r\n  max-width: 340px;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  position: relative;\r\n  z-index: 1;\r\n  background-color: #fff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 10px;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  height: 250px;\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n  width: 100%;\r\n  height: 160px;\r\n  position: absolute;\r\n  top: -28%;\r\n  left: 0;\r\n  will-change: top;\r\n  background: #00758a;\r\n  background-size: cover;\r\n  background-position: center;\r\n  transform: scale(1.2);\r\n  transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n  width: 120px;\r\n  height: 120px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n  width: 100%;\r\n  max-width: 200px;\r\n  height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* white-space: nowrap;\r\n  transform: translateY(-10px) translateX(-50%);\r\n  left: 50%; */\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 11px;\r\n  /*  white-space: nowrap; */\r\n  font-weight: 500;\r\n  text-align: center;\r\n  opacity: 0.7;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* left: 50%;\r\n  transform: translateX(-50%) translateY(-7px); */\r\n  margin: 0;\r\n}\r\n\r\n.card-main {\r\n  position: relative;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n  display: block;\r\n}\r\n\r\n.card-content {\r\n  padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n  font-weight: 700;\r\n  font-size: 13px;\r\n  margin-bottom: 8px;\r\n  color: #333;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n  line-height: 1.6;\r\n  color: rgb(110, 110, 115);\r\n  font-size: 14px;\r\n  margin: 0;\r\n  font-weight: 400;\r\n  min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 20px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n  color: #8797a1;\r\n  height: 32px;\r\n  width: 32px;\r\n  border-radius: 50%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: 0.3s;\r\n  background-color: rgba(93, 133, 193, 0.05);\r\n  margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n  align-self: center;\r\n  color: #06c;\r\n  text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n  color: #cccccc;\r\n  cursor: not-allowed;\r\n  text-decoration: none;\r\n}\r\n";
+const styles = ".card {\r\n  max-width: 340px;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  position: relative;\r\n  z-index: 1;\r\n  background-color: #fff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 10px;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  height: 250px;\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n  width: 100%;\r\n  height: 160px;\r\n  position: absolute;\r\n  top: -28%;\r\n  left: 0;\r\n  will-change: top;\r\n  background: #00758a;\r\n  background-size: cover;\r\n  background-position: center;\r\n  transform: scale(1.2);\r\n  transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n  width: 120px;\r\n  height: 120px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n  width: 100%;\r\n  max-width: 200px;\r\n  height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* white-space: nowrap;\r\n  transform: translateY(-10px) translateX(-50%);\r\n  left: 50%; */\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 11px;\r\n  /*  white-space: nowrap; */\r\n  line-height: 1.5;\r\n  font-weight: 500;\r\n  text-align: center;\r\n  opacity: 0.7;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* left: 50%;\r\n  transform: translateX(-50%) translateY(-7px); */\r\n  margin: 0;\r\n}\r\n\r\n.card-main {\r\n  position: relative;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n  display: block;\r\n}\r\n\r\n.card-content {\r\n  padding: 20px;\r\n  height: 150px;\r\n}\r\n\r\n.card-subtitle {\r\n  font-weight: 700;\r\n  font-size: 13px;\r\n  margin-bottom: 8px;\r\n  color: #333;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n  line-height: 1.6;\r\n  color: rgb(110, 110, 115);\r\n  font-size: 14px;\r\n  margin: 0;\r\n  font-weight: 400;\r\n  min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 20px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n  color: #8797a1;\r\n  height: 32px;\r\n  width: 32px;\r\n  border-radius: 50%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: 0.3s;\r\n  background-color: rgba(93, 133, 193, 0.05);\r\n  margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n  align-self: center;\r\n  color: #06c;\r\n  text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n  color: #cccccc;\r\n  cursor: not-allowed;\r\n  text-decoration: none;\r\n}\r\n";
 module.exports = styles;

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

@@ -1,4 +1,4 @@
-const styles = ".card {\r\n  max-width: 340px;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  position: relative;\r\n  z-index: 1;\r\n  background-color: #fff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 10px;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  height: 250px;\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n  width: 100%;\r\n  height: 160px;\r\n  position: absolute;\r\n  top: -28%;\r\n  left: 0;\r\n  will-change: top;\r\n  background: #00758a;\r\n  background-size: cover;\r\n  background-position: center;\r\n  transform: scale(1.2);\r\n  transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n  width: 120px;\r\n  height: 120px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n  width: 100%;\r\n  max-width: 200px;\r\n  height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* white-space: nowrap;\r\n  transform: translateY(-10px) translateX(-50%);\r\n  left: 50%; */\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 11px;\r\n  /*  white-space: nowrap; */\r\n  font-weight: 500;\r\n  text-align: center;\r\n  opacity: 0.7;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* left: 50%;\r\n  transform: translateX(-50%) translateY(-7px); */\r\n  margin: 0;\r\n}\r\n\r\n.card-main {\r\n  position: relative;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n  display: block;\r\n}\r\n\r\n.card-content {\r\n  padding: 20px;\r\n}\r\n\r\n.card-subtitle {\r\n  font-weight: 700;\r\n  font-size: 13px;\r\n  margin-bottom: 8px;\r\n  color: #333;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n  line-height: 1.6;\r\n  color: rgb(110, 110, 115);\r\n  font-size: 14px;\r\n  margin: 0;\r\n  font-weight: 400;\r\n  min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 20px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n  color: #8797a1;\r\n  height: 32px;\r\n  width: 32px;\r\n  border-radius: 50%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: 0.3s;\r\n  background-color: rgba(93, 133, 193, 0.05);\r\n  margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n  align-self: center;\r\n  color: #06c;\r\n  text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n  color: #cccccc;\r\n  cursor: not-allowed;\r\n  text-decoration: none;\r\n}\r\n";
+const styles = ".card {\r\n  max-width: 340px;\r\n  width: 100%;\r\n  overflow-y: auto;\r\n  overflow-x: hidden;\r\n  position: relative;\r\n  z-index: 1;\r\n  background-color: #fff;\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 10px;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-header {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  height: 250px;\r\n  flex-shrink: 0;\r\n  width: 100%;\r\n  transition: 0.3s;\r\n}\r\n\r\n.card-cover {\r\n  width: 100%;\r\n  height: 160px;\r\n  position: absolute;\r\n  top: -28%;\r\n  left: 0;\r\n  will-change: top;\r\n  background: #00758a;\r\n  background-size: cover;\r\n  background-position: center;\r\n  transform: scale(1.2);\r\n  transition: 0.5s;\r\n}\r\n\r\n.card-avatar-container {\r\n  width: 120px;\r\n  height: 120px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1;\r\n}\r\n\r\n.card-avatar {\r\n  object-fit: cover;\r\n  display: block;\r\n}\r\n\r\n.card-wrap-details {\r\n  width: 100%;\r\n  max-width: 200px;\r\n  height: 100px;\r\n}\r\n\r\n.card-fullname {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 22px;\r\n  font-weight: 700;\r\n  text-align: center;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* white-space: nowrap;\r\n  transform: translateY(-10px) translateX(-50%);\r\n  left: 50%; */\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-jobtitle {\r\n  /* position: absolute;\r\n  bottom: 0; */\r\n  font-size: 11px;\r\n  /*  white-space: nowrap; */\r\n  line-height: 1.5;\r\n  font-weight: 500;\r\n  text-align: center;\r\n  opacity: 0.7;\r\n  text-transform: uppercase;\r\n  letter-spacing: 1.5px;\r\n  word-wrap: break-word;\r\n  word-break: break-word;\r\n  /* left: 50%;\r\n  transform: translateX(-50%) translateY(-7px); */\r\n  margin: 0;\r\n}\r\n\r\n.card-main {\r\n  position: relative;\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  padding-top: 10px;\r\n}\r\n\r\n.card-section {\r\n  display: block;\r\n}\r\n\r\n.card-content {\r\n  padding: 20px;\r\n  height: 150px;\r\n}\r\n\r\n.card-subtitle {\r\n  font-weight: 700;\r\n  font-size: 13px;\r\n  margin-bottom: 8px;\r\n  color: #333;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.card-desc {\r\n  line-height: 1.6;\r\n  color: rgb(110, 110, 115);\r\n  font-size: 14px;\r\n  margin: 0;\r\n  font-weight: 400;\r\n  min-height: 10ch;\r\n}\r\n\r\n.card-container-url {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 20px;\r\n  margin-bottom: 30px;\r\n}\r\n\r\n.card-icon {\r\n  color: #8797a1;\r\n  height: 32px;\r\n  width: 32px;\r\n  border-radius: 50%;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: 0.3s;\r\n  background-color: rgba(93, 133, 193, 0.05);\r\n  margin-right: 10px;\r\n}\r\n\r\n.go-to-profile {\r\n  align-self: center;\r\n  color: #06c;\r\n  text-decoration: none;\r\n}\r\n\r\n.go-to-profile:hover {\r\n  text-decoration: underline;\r\n}\r\n\r\n.link_disabled {\r\n  color: #cccccc;\r\n  cursor: not-allowed;\r\n  text-decoration: none;\r\n}\r\n";
 export {
   styles as default
 };

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
-const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
 const displayLocalImage = qwik.$((file, imageUrl) => {
   const allowedExtensions = [
     ".jpg",
@@ -31,45 +30,43 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
   const internalError = qwik.useSignal(null);
   const isPasswordVisible = qwik.useSignal(false);
   const showError = error ?? internalError;
-  const valueIsSignal = isSignal(value);
-  const resolvedValue = valueIsSignal ? value.value : value ?? "";
   const togglePasswordVisibility = qwik.$(() => {
     isPasswordVisible.value = !isPasswordVisible.value;
   });
   const inputHandler = qwik.$(async (_, elem) => {
     if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
       elem.value = elem.value.toLowerCase();
-      if (valueIsSignal) value.value = elem.value.toLowerCase();
+      if (value) value.value = elem.value.toLowerCase();
     }
     if (type === "number") {
-      if (valueIsSignal) value.value = elem.value;
+      if (value) value.value = elem.value;
       if (!/^\d+$/.test(elem.value)) {
-        if (valueIsSignal) {
+        if (value) {
           elem.value = value.value;
         }
         return;
       }
       if (elem.value.length > 1 && elem.value.startsWith("0")) {
         elem.value = elem.value.slice(0, -1);
-        if (valueIsSignal) value.value = elem.value;
+        if (value) value.value = elem.value;
         return;
       }
       const num = parseInt(elem.value, 10);
       if (!isNaN(num) && num > 100) {
         elem.value = elem.value.slice(0, -1);
-        if (valueIsSignal) value.value = elem.value;
+        if (value) value.value = elem.value;
         return;
       }
     }
     if (type === "tel") {
       if (!/^[0-9]*$/.test(elem.value)) {
-        if (valueIsSignal) {
+        if (value) {
           elem.value = value.value;
         }
         return;
       }
     }
-    if (valueIsSignal) value.value = elem.value;
+    if (value) value.value = elem.value;
     if (onInput$ && _.type === "input") {
       await onInput$(_, elem);
     }
@@ -79,11 +76,6 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
     }
   });
   const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
-  const inputBindProps = valueIsSignal ? {
-    "bind:value": value
-  } : {
-    value: resolvedValue
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "input-container",
     children: [
@@ -148,7 +140,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
                 pattern: "[0-9]*",
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 maxLength: 14,
@@ -199,7 +191,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
                 type: effectiveType,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 required,
@@ -237,7 +229,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
                 type,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 required,

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

@@ -1,7 +1,6 @@
 import { jsxs, jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
 import { $, noSerialize, component$, useStylesScoped$, useSignal } from "@builder.io/qwik";
 import styles from "./styles.css.qwik.mjs";
-const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
 const displayLocalImage = $((file, imageUrl) => {
   const allowedExtensions = [
     ".jpg",
@@ -29,45 +28,43 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
   const internalError = useSignal(null);
   const isPasswordVisible = useSignal(false);
   const showError = error ?? internalError;
-  const valueIsSignal = isSignal(value);
-  const resolvedValue = valueIsSignal ? value.value : value ?? "";
   const togglePasswordVisibility = $(() => {
     isPasswordVisible.value = !isPasswordVisible.value;
   });
   const inputHandler = $(async (_, elem) => {
     if (type === "url" && _.type === "blur" && lowercaseOnBlur) {
       elem.value = elem.value.toLowerCase();
-      if (valueIsSignal) value.value = elem.value.toLowerCase();
+      if (value) value.value = elem.value.toLowerCase();
     }
     if (type === "number") {
-      if (valueIsSignal) value.value = elem.value;
+      if (value) value.value = elem.value;
       if (!/^\d+$/.test(elem.value)) {
-        if (valueIsSignal) {
+        if (value) {
           elem.value = value.value;
         }
         return;
       }
       if (elem.value.length > 1 && elem.value.startsWith("0")) {
         elem.value = elem.value.slice(0, -1);
-        if (valueIsSignal) value.value = elem.value;
+        if (value) value.value = elem.value;
         return;
       }
       const num = parseInt(elem.value, 10);
       if (!isNaN(num) && num > 100) {
         elem.value = elem.value.slice(0, -1);
-        if (valueIsSignal) value.value = elem.value;
+        if (value) value.value = elem.value;
         return;
       }
     }
     if (type === "tel") {
       if (!/^[0-9]*$/.test(elem.value)) {
-        if (valueIsSignal) {
+        if (value) {
           elem.value = value.value;
         }
         return;
       }
     }
-    if (valueIsSignal) value.value = elem.value;
+    if (value) value.value = elem.value;
     if (onInput$ && _.type === "input") {
       await onInput$(_, elem);
     }
@@ -77,11 +74,6 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
     }
   });
   const effectiveType = type === "password" && isPasswordVisible.value ? "text" : type;
-  const inputBindProps = valueIsSignal ? {
-    "bind:value": value
-  } : {
-    value: resolvedValue
-  };
   return /* @__PURE__ */ jsxs("div", {
     class: "input-container",
     children: [
@@ -146,7 +138,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
                 pattern: "[0-9]*",
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 maxLength: 14,
@@ -197,7 +189,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
                 type: effectiveType,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 required,
@@ -235,7 +227,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
                 type,
                 class: `input ${showError.value ? "error" : ""}`,
                 placeholder,
-                ...inputBindProps,
+                "bind:value": value,
                 onInput$: inputHandler,
                 onBlur$: inputHandler,
                 required,

package/lib/components/text_area/text_area.qwik.cjs

@@ -3,17 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
-const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
-const TextArea = qwik.component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
+const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
   qwik.useStylesScoped$(styles);
-  const contentIsSignal = isSignal(content);
-  const resolvedContent = contentIsSignal ? content.value : content ?? "";
-  const currentLength = resolvedContent.length;
-  const textareaBindProps = contentIsSignal ? {
-    "bind:value": content
-  } : {
-    value: resolvedContent
-  };
+  const currentLength = content?.value?.length ?? 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "text-area-container",
     children: [
@@ -27,13 +19,12 @@ const TextArea = qwik.component$(({ id, title, content, onInput$, required = fal
         name: "story",
         rows: 5,
         cols: 33,
-        ...textareaBindProps,
-        onInput$: !contentIsSignal ? onInput$ : void 0,
+        "bind:value": content,
         required,
         placeholder,
         class: `text-area ${bgLight ? "bg_light" : ""}`,
         maxLength,
-        children: resolvedContent
+        children: content.value
       }),
       showCounter && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,

package/lib/components/text_area/text_area.qwik.mjs

@@ -1,17 +1,9 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useStylesScoped$ } from "@builder.io/qwik";
 import styles from "./styles.css.qwik.mjs";
-const isSignal = (v) => v !== null && typeof v === "object" && "value" in v;
-const TextArea = component$(({ id, title, content, onInput$, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
+const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
   useStylesScoped$(styles);
-  const contentIsSignal = isSignal(content);
-  const resolvedContent = contentIsSignal ? content.value : content ?? "";
-  const currentLength = resolvedContent.length;
-  const textareaBindProps = contentIsSignal ? {
-    "bind:value": content
-  } : {
-    value: resolvedContent
-  };
+  const currentLength = content?.value?.length ?? 0;
   return /* @__PURE__ */ jsxs("div", {
     class: "text-area-container",
     children: [
@@ -25,13 +17,12 @@ const TextArea = component$(({ id, title, content, onInput$, required = false, p
         name: "story",
         rows: 5,
         cols: 33,
-        ...textareaBindProps,
-        onInput$: !contentIsSignal ? onInput$ : void 0,
+        "bind:value": content,
         required,
         placeholder,
         class: `text-area ${bgLight ? "bg_light" : ""}`,
         maxLength,
-        children: resolvedContent
+        children: content.value
       }),
       showCounter && maxLength && /* @__PURE__ */ jsxs("div", {
         class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,

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

@@ -4,7 +4,7 @@ export interface InputProps {
     id: string;
     type: InputType;
     placeholder?: string;
-    value?: Signal<string> | string;
+    value?: Signal<string>;
     error?: Signal<string | null>;
     onValidate$?: QRL<(value: string) => Promise<string>>;
     onInput$?: QRL<() => void> | QRL<(event: InputEvent, el: HTMLInputElement) => void>;

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

@@ -1,9 +1,8 @@
-import { QRL, Signal } from '@builder.io/qwik';
+import { Signal } from '@builder.io/qwik';
 export interface TextAreaProps {
     id: string;
     title?: string;
-    content: Signal<string> | string;
-    onInput$?: QRL<(event: InputEvent, el: HTMLTextAreaElement) => void>;
+    content: Signal<string>;
     required?: boolean;
     placeholder?: string;
     bgLight?: boolean;

package/package.json

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