@greghowe79/the-lib 0.7.1 → 0.7.3

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

@@ -1,3 +1,3 @@
 "use strict";
-const styles = "/* Button variants */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n}\r\n";
+const styles = "/* .button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n  background-color: #cccccc;\r\n  color: #666666;\r\n  cursor: default; /* Usa il cursore a freccia */\r\n  opacity: 0.6;\r\n}\r\n\r\n/* Assicurati che l'hover non funzioni quando il pulsante è disabilitato */\r\n.button-primary:disabled:hover,\r\n.button-secondary:disabled:hover,\r\n.button-danger:disabled:hover,\r\n.button-disabled:hover {\r\n  background-color: #cccccc;\r\n  border: 2px solid transparent;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:not(:disabled):hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n}\r\n\r\nbutton.button-tertiary:not(:disabled):hover {\r\n  background: #f0f0f0;\r\n}\r\n";
 module.exports = styles;

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

@@ -1,4 +1,4 @@
-const styles = "/* Button variants */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n}\r\n";
+const styles = "/* .button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: #333;\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n  background: #0095ae;\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n  border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n  background: linear-gradient(to right, #5a6268, #4e555b);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n  display: inline-block;\r\n  outline: none;\r\n  border: 2px solid transparent;\r\n  border-radius: 3px;\r\n  box-sizing: border-box;\r\n  font-weight: 500;\r\n  max-width: 100%;\r\n  text-align: center;\r\n  text-decoration: none;\r\n  transition:\r\n    background 0.1s ease-out 0s,\r\n    box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n  background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n  cursor: pointer;\r\n  height: 32px;\r\n  line-height: 32px;\r\n  padding: 0px 12px;\r\n  vertical-align: middle;\r\n  width: auto;\r\n  font-size: 14px;\r\n  color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n  background: linear-gradient(to right, #c82333, #bd2130);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n  background-color: #cccccc;\r\n  color: #666666;\r\n  cursor: default; /* Usa il cursore a freccia */\r\n  opacity: 0.6;\r\n}\r\n\r\n/* Assicurati che l'hover non funzioni quando il pulsante è disabilitato */\r\n.button-primary:disabled:hover,\r\n.button-secondary:disabled:hover,\r\n.button-danger:disabled:hover,\r\n.button-disabled:hover {\r\n  background-color: #cccccc;\r\n  border: 2px solid transparent;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  width: 100%;\r\n}\r\n\r\n.button-md {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 0.313rem;\r\n  font-size: 1rem;\r\n  height: 100%;\r\n  line-height: 1.25rem;\r\n  padding: 0.75rem 1.5rem;\r\n  border-radius: 2rem;\r\n  max-width: 12rem;\r\n}\r\n\r\n.button__icon {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.button__text {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  white-space: nowrap;\r\n}\r\n\r\nbutton.button-icon {\r\n  gap: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:not(:disabled):hover {\r\n  background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n  background: transparent;\r\n  font-weight: 500;\r\n  border: 2px solid #333;\r\n  outline: none;\r\n  cursor: pointer;\r\n  color: #333;\r\n}\r\n\r\nbutton.button-tertiary:not(:disabled):hover {\r\n  background: #f0f0f0;\r\n}\r\n";
 export {
   styles as default
 };

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

@@ -4,12 +4,34 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
 require("@fontsource/roboto-condensed/500.css");
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight }) => {
+const displayLocalImage = qwik.$((file, imageUrl) => {
+  const allowedExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".avif"
+  ];
+  const fileExtension = file.name.split(".").pop()?.toLowerCase();
+  if (fileExtension && allowedExtensions.includes("." + fileExtension)) {
+    if (imageUrl) imageUrl.value = URL.createObjectURL(file);
+  } else {
+    console.error("Unsupported file format");
+  }
+});
+const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imageUrl) => {
+  const file = input.files?.[0];
+  if (file) {
+    displayLocalImage(file, imageUrl);
+    if (currentFile) currentFile.value = qwik.noSerialize(file);
+    if (selectedFile) selectedFile.value = file.name;
+  }
+});
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
   const inputHandler = qwik.$(async (_, elem) => {
-    value.value = elem.value;
+    if (value) value.value = elem.value;
     if (onInput$) {
       await onInput$();
     }
@@ -21,7 +43,44 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "input-container",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", {
+      type === "file" ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "flex_wrapper",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              class: "label_wrapper",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("label", {
+                  for: id,
+                  class: `input-label-upload ${bgLight ? "bg_light" : ""}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                    children: "Upload"
+                  })
+                }),
+                /* @__PURE__ */ jsxRuntime.jsx("input", {
+                  class: "input",
+                  type,
+                  id,
+                  name: id,
+                  accept: ".png, .jpg, .jpeg, .avif",
+                  onChange$: (_, el) => uploadImage(_, el, currentFile, selectedFile),
+                  required: true
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", {
+              class: "preview_container",
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: "prev_wrap",
+                children: /* @__PURE__ */ jsxRuntime.jsx("p", {
+                  class: "preview",
+                  children: selectedFile?.value
+                })
+              })
+            })
+          ]
+        })
+      }) : /* @__PURE__ */ jsxRuntime.jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsxRuntime.jsx("input", {
           id,
@@ -42,3 +101,5 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
   });
 });
 exports.Input = Input;
+exports.displayLocalImage = displayLocalImage;
+exports.uploadImage = uploadImage;

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

@@ -1,13 +1,35 @@
-import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, useStylesScoped$, useSignal, $ } from "@builder.io/qwik";
+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";
 import "@fontsource/roboto-condensed/500.css";
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight }) => {
+const displayLocalImage = $((file, imageUrl) => {
+  const allowedExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".avif"
+  ];
+  const fileExtension = file.name.split(".").pop()?.toLowerCase();
+  if (fileExtension && allowedExtensions.includes("." + fileExtension)) {
+    if (imageUrl) imageUrl.value = URL.createObjectURL(file);
+  } else {
+    console.error("Unsupported file format");
+  }
+});
+const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl) => {
+  const file = input.files?.[0];
+  if (file) {
+    displayLocalImage(file, imageUrl);
+    if (currentFile) currentFile.value = noSerialize(file);
+    if (selectedFile) selectedFile.value = file.name;
+  }
+});
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
   const showError = error ?? internalError;
   const inputHandler = $(async (_, elem) => {
-    value.value = elem.value;
+    if (value) value.value = elem.value;
     if (onInput$) {
       await onInput$();
     }
@@ -19,7 +41,44 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
   return /* @__PURE__ */ jsxs("div", {
     class: "input-container",
     children: [
-      /* @__PURE__ */ jsx("label", {
+      type === "file" ? /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsxs("div", {
+          class: "flex_wrapper",
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              class: "label_wrapper",
+              children: [
+                /* @__PURE__ */ jsx("label", {
+                  for: id,
+                  class: `input-label-upload ${bgLight ? "bg_light" : ""}`,
+                  children: /* @__PURE__ */ jsx("div", {
+                    children: "Upload"
+                  })
+                }),
+                /* @__PURE__ */ jsx("input", {
+                  class: "input",
+                  type,
+                  id,
+                  name: id,
+                  accept: ".png, .jpg, .jpeg, .avif",
+                  onChange$: (_, el) => uploadImage(_, el, currentFile, selectedFile),
+                  required: true
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              class: "preview_container",
+              children: /* @__PURE__ */ jsx("div", {
+                class: "prev_wrap",
+                children: /* @__PURE__ */ jsx("p", {
+                  class: "preview",
+                  children: selectedFile?.value
+                })
+              })
+            })
+          ]
+        })
+      }) : /* @__PURE__ */ jsx("label", {
         class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsx("input", {
           id,
@@ -40,5 +99,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
   });
 });
 export {
-  Input
+  Input,
+  displayLocalImage,
+  uploadImage
 };

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

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
 module.exports = styles;

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

@@ -1,4 +1,4 @@
-const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\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  border-radius: 0.5rem;\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.125rem;\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.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\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  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\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.5rem 0 0 0.5rem;\r\n  height: 3.4375rem;\r\n  background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n  height: 3.4375rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  border-radius: 0 0.5rem 0.5rem 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";
 export {
   styles as default
 };

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

@@ -5,10 +5,14 @@ export interface InputProps {
     id: string;
     type: InputType;
     placeholder?: string;
-    value: Signal<string>;
+    value?: Signal<string>;
     error?: Signal<string | null>;
     onValidate$?: QRL<(value: string) => Promise<string>>;
     onInput$?: QRL<() => void>;
     bgLight?: boolean;
+    currentFile?: Signal<any>;
+    selectedFile?: Signal<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>>;
 export declare const Input: import("@builder.io/qwik").Component<InputProps>;

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<InputProps>;
 export declare const Email: Story;
 export declare const InputLightBackground: Story;
+export declare const FileUpload: Story;

package/package.json

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