@greghowe79/the-lib 1.1.5 → 1.1.7

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

@@ -1,3 +1,3 @@
 "use strict";
-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";
+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: #000000;\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-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";
+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: #000000;\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

@@ -31,6 +31,21 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
   const inputHandler = qwik.$(async (_, elem) => {
+    if (type === "number") {
+      const num = Number(elem.value);
+      if (num > 100) {
+        elem.value = elem.value.slice(0, -1);
+        return;
+      }
+      if (isNaN(num) || num < 1) {
+        if (value) {
+          elem.value = value.value;
+        } else {
+          elem.value = "";
+        }
+        return;
+      }
+    }
     if (type === "tel") {
       if (!/^[0-9]*$/.test(elem.value)) {
         if (value) {

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

@@ -29,6 +29,21 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
   const internalError = useSignal(null);
   const showError = error ?? internalError;
   const inputHandler = $(async (_, elem) => {
+    if (type === "number") {
+      const num = Number(elem.value);
+      if (num > 100) {
+        elem.value = elem.value.slice(0, -1);
+        return;
+      }
+      if (isNaN(num) || num < 1) {
+        if (value) {
+          elem.value = value.value;
+        } else {
+          elem.value = "";
+        }
+        return;
+      }
+    }
     if (type === "tel") {
       if (!/^[0-9]*$/.test(elem.value)) {
         if (value) {

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

@@ -5,6 +5,7 @@ export default meta;
 type Story = StoryObj<InputProps>;
 export declare const Email: Story;
 export declare const InputLightBackground: Story;
+export declare const InputNumber: Story;
 export declare const InputWithIcon: Story;
 export declare const PhoneInput: Story;
 export declare const FileUpload: Story;

package/package.json

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