@greghowe79/the-lib 2.0.2 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/components/button/styles.css.qwik.cjs +1 -1
  2. package/lib/components/button/styles.css.qwik.mjs +1 -1
  3. package/lib/components/text_area/text_area.qwik.cjs +2 -1
  4. package/lib/components/text_area/text_area.qwik.mjs +2 -1
  5. package/lib-types/components/text_area/text_area.d.ts +1 -0
  6. package/package.json +1 -1
package/lib/components/button/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- 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/* 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 background: #000;\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 width: 100%;\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 width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 1rem 1.5rem;\r\n background: none;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n color: #6b7280;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-bottom: -2px;\r\n border-radius: 0;\r\n height: auto;\r\n max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n color: #111827;\r\n border-bottom-color: #d1d5db;\r\n background: none;\r\n border-left: none;\r\n border-right: none;\r\n border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n color: #06c;\r\n border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n";
2
+ 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/* 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 background: #000;\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 /* width: 100%; */\r\n max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n width: 100%;\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 width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 1rem 1.5rem;\r\n background: none;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n color: #6b7280;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-bottom: -2px;\r\n border-radius: 0;\r\n height: auto;\r\n max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n color: #111827;\r\n border-bottom-color: #d1d5db;\r\n background: none;\r\n border-left: none;\r\n border-right: none;\r\n border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n color: #06c;\r\n border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/button/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- 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/* 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 background: #000;\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 width: 100%;\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 width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 1rem 1.5rem;\r\n background: none;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n color: #6b7280;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-bottom: -2px;\r\n border-radius: 0;\r\n height: auto;\r\n max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n color: #111827;\r\n border-bottom-color: #d1d5db;\r\n background: none;\r\n border-left: none;\r\n border-right: none;\r\n border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n color: #06c;\r\n border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n";
1
+ 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/* 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 background: #000;\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 /* width: 100%; */\r\n max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n width: 100%;\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 width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 1rem 1.5rem;\r\n background: none;\r\n border: none;\r\n border-bottom: 3px solid transparent;\r\n color: #6b7280;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n margin-bottom: -2px;\r\n border-radius: 0;\r\n height: auto;\r\n max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n color: #111827;\r\n border-bottom-color: #d1d5db;\r\n background: none;\r\n border-left: none;\r\n border-right: none;\r\n border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n color: #06c;\r\n border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib/components/text_area/text_area.qwik.cjs CHANGED
@@ -4,7 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
4
4
  const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/500.css");
7
- const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight }) => {
7
+ const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength }) => {
8
8
  qwik.useStylesScoped$(styles);
9
9
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
10
10
  class: "text-area-container",
@@ -23,6 +23,7 @@ const TextArea = qwik.component$(({ id, title, content, required = false, placeh
23
23
  required,
24
24
  placeholder,
25
25
  class: `text-area ${bgLight ? "bg_light" : ""}`,
26
+ maxLength,
26
27
  children: content.value
27
28
  })
28
29
  ]
package/lib/components/text_area/text_area.qwik.mjs CHANGED
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
2
2
  import { component$, useStylesScoped$ } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/500.css";
5
- const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight }) => {
5
+ const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength }) => {
6
6
  useStylesScoped$(styles);
7
7
  return /* @__PURE__ */ jsxs("div", {
8
8
  class: "text-area-container",
@@ -21,6 +21,7 @@ const TextArea = component$(({ id, title, content, required = false, placeholder
21
21
  required,
22
22
  placeholder,
23
23
  class: `text-area ${bgLight ? "bg_light" : ""}`,
24
+ maxLength,
24
25
  children: content.value
25
26
  })
26
27
  ]
package/lib-types/components/text_area/text_area.d.ts CHANGED
@@ -7,5 +7,6 @@ export interface TextAreaProps {
7
7
  required?: boolean;
8
8
  placeholder?: string;
9
9
  bgLight?: boolean;
10
+ maxLength?: number;
10
11
  }
11
12
  export declare const TextArea: import("@builder.io/qwik").Component<TextAreaProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.0.2",
3
+ "version": "2.0.4",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",