@greghowe79/the-lib 0.3.2 → 0.3.4

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-width: 0px;\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: rgb(0, 51, 153);\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: rgb(0, 101, 255);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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-width: 0px;\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}\r\n\r\n/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n";
+const styles = "/* Button variants */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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: rgb(0, 51, 153);\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: rgb(0, 101, 255);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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-width: 0px;\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}\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  padding: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\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";
 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-width: 0px;\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: rgb(0, 51, 153);\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: rgb(0, 101, 255);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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-width: 0px;\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}\r\n\r\n/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n";
+const styles = "/* Button variants */\r\n.button-primary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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: rgb(0, 51, 153);\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: rgb(0, 101, 255);\r\n  text-decoration: inherit;\r\n  transition-duration: 0s, 0.15s;\r\n  color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-secondary {\r\n  display: inline-block;\r\n  outline: none;\r\n  border-width: 0px;\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-width: 0px;\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}\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  padding: 0;\r\n  background: none;\r\n  border: none;\r\n  outline: none;\r\n  cursor: pointer;\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";
 export {
   styles as default
 };

package/lib/components/modal/modal.qwik.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const styles = require("./styles.css.qwik.cjs");
+const button = require("../button/button.qwik.cjs");
+require("@fontsource/roboto-condensed");
+const Modal = qwik.component$(({ title, open, icon, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction }) => {
+  qwik.useStylesScoped$(styles);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    id: "modal",
+    class: "modal-overlay",
+    "aria-hidden": !open.value,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-title",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "modal",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "modal-header",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", {
+              id: "modal-title",
+              children: title
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+              id: "close-button",
+              ariaLabel: "Chiudi modale",
+              onClick$: () => open.value = false,
+              icon,
+              variant: "icon"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "modal-body",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          class: "modal-footer",
+          children: [
+            secondaryButtonLabel && /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+              id: "cancel-button",
+              label: secondaryButtonLabel,
+              onClick$: secondaryAction,
+              variant: "tertiary"
+            }),
+            primaryButtonLabel && /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+              id: "confirm-button",
+              label: primaryButtonLabel,
+              onClick$: primaryAction
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+exports.Modal = Modal;

package/lib/components/modal/modal.qwik.mjs

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$, Slot } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
+import { Button } from "../button/button.qwik.mjs";
+import "@fontsource/roboto-condensed";
+const Modal = component$(({ title, open, icon, primaryButtonLabel, secondaryButtonLabel, primaryAction, secondaryAction }) => {
+  useStylesScoped$(styles);
+  return /* @__PURE__ */ jsx("div", {
+    id: "modal",
+    class: "modal-overlay",
+    "aria-hidden": !open.value,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-labelledby": "modal-title",
+    children: /* @__PURE__ */ jsxs("div", {
+      class: "modal",
+      tabIndex: -1,
+      children: [
+        /* @__PURE__ */ jsxs("div", {
+          class: "modal-header",
+          children: [
+            /* @__PURE__ */ jsx("h2", {
+              id: "modal-title",
+              children: title
+            }),
+            /* @__PURE__ */ jsx(Button, {
+              id: "close-button",
+              ariaLabel: "Chiudi modale",
+              onClick$: () => open.value = false,
+              icon,
+              variant: "icon"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "modal-body",
+          tabIndex: 0,
+          children: /* @__PURE__ */ jsx(Slot, {})
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          class: "modal-footer",
+          children: [
+            secondaryButtonLabel && /* @__PURE__ */ jsx(Button, {
+              id: "cancel-button",
+              label: secondaryButtonLabel,
+              onClick$: secondaryAction,
+              variant: "tertiary"
+            }),
+            primaryButtonLabel && /* @__PURE__ */ jsx(Button, {
+              id: "confirm-button",
+              label: primaryButtonLabel,
+              onClick$: primaryAction
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
+export {
+  Modal
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ".modal-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1000;\r\n}\r\n\r\n.modal {\r\n  background: white;\r\n  border-radius: 8px;\r\n  width: 90%;\r\n  max-width: 800px;\r\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n  outline: none;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  color: #333;\r\n}\r\n\r\n.modal-header {\r\n  padding: 16px 24px;\r\n  border-bottom: 1px solid #e0e0e0;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.modal-header h2 {\r\n  margin: 0;\r\n  font-size: 1.25rem;\r\n}\r\n\r\n.modal-body {\r\n  padding: 24px;\r\n  max-height: 60vh;\r\n  overflow-y: auto;\r\n  font-weight: 400;\r\n}\r\n\r\n.modal-footer {\r\n  padding: 16px 24px;\r\n  border-top: 1px solid #e0e0e0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 12px;\r\n}\r\n\r\n.close-button {\r\n  background: none;\r\n  border: none;\r\n  font-size: 1.5rem;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n}\r\n\r\n[aria-hidden='true'] {\r\n  display: none;\r\n}\r\n\r\nbutton:focus,\r\n[tabindex='0']:focus {\r\n  outline: 2px solid #005fcc;\r\n  outline-offset: 2px;\r\n}\r\n";
+module.exports = styles;

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

@@ -0,0 +1,4 @@
+const styles = ".modal-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 1000;\r\n}\r\n\r\n.modal {\r\n  background: white;\r\n  border-radius: 8px;\r\n  width: 90%;\r\n  max-width: 800px;\r\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\r\n  outline: none;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  color: #333;\r\n}\r\n\r\n.modal-header {\r\n  padding: 16px 24px;\r\n  border-bottom: 1px solid #e0e0e0;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n}\r\n\r\n.modal-header h2 {\r\n  margin: 0;\r\n  font-size: 1.25rem;\r\n}\r\n\r\n.modal-body {\r\n  padding: 24px;\r\n  max-height: 60vh;\r\n  overflow-y: auto;\r\n  font-weight: 400;\r\n}\r\n\r\n.modal-footer {\r\n  padding: 16px 24px;\r\n  border-top: 1px solid #e0e0e0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 12px;\r\n}\r\n\r\n.close-button {\r\n  background: none;\r\n  border: none;\r\n  font-size: 1.5rem;\r\n  cursor: pointer;\r\n  padding: 4px;\r\n}\r\n\r\n[aria-hidden='true'] {\r\n  display: none;\r\n}\r\n\r\nbutton:focus,\r\n[tabindex='0']:focus {\r\n  outline: 2px solid #005fcc;\r\n  outline-offset: 2px;\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -4,7 +4,9 @@ const logo = require("./components/logo/logo.qwik.cjs");
 const counter = require("./components/counter/counter.qwik.cjs");
 const button = require("./components/button/button.qwik.cjs");
 const NavigationMenu = require("./components/navigationmenu/NavigationMenu.qwik.cjs");
+const modal = require("./components/modal/modal.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
 exports.NavigationMenu = NavigationMenu.NavigationMenu;
+exports.Modal = modal.Modal;

package/lib/index.qwik.mjs

@@ -2,9 +2,11 @@ import { Logo } from "./components/logo/logo.qwik.mjs";
 import { Counter } from "./components/counter/counter.qwik.mjs";
 import { Button } from "./components/button/button.qwik.mjs";
 import { NavigationMenu } from "./components/navigationmenu/NavigationMenu.qwik.mjs";
+import { Modal } from "./components/modal/modal.qwik.mjs";
 export {
   Button,
   Counter,
   Logo,
+  Modal,
   NavigationMenu
 };

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

@@ -1,17 +1,17 @@
 import { Component, JSXOutput, QRL } from '@builder.io/qwik';
 import '@fontsource/roboto-condensed/500.css';
-export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon' | 'tertiary';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonSize = 'sm' | 'md' | 'lg';
 export interface ButtonProps {
     id: string;
-    label: string;
+    label?: string;
     variant?: ButtonVariant;
     icon?: JSXOutput | Component<unknown>;
     disabled?: boolean;
     ariaLabel?: string;
     type?: ButtonType;
     size?: ButtonSize;
-    onClick$?: QRL<() => void> | QRL<() => boolean>;
+    onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>>;
 }
 export declare const Button: Component<ButtonProps>;

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

@@ -0,0 +1,12 @@
+import { Component, JSXOutput, QRL, Signal } from '@builder.io/qwik';
+import '@fontsource/roboto-condensed';
+export interface ModalProps {
+    title?: string;
+    open: Signal<boolean>;
+    icon?: JSXOutput | Component<unknown>;
+    primaryButtonLabel?: string;
+    secondaryButtonLabel?: string;
+    primaryAction?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>>;
+    secondaryAction?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>>;
+}
+export declare const Modal: Component<ModalProps>;

package/lib-types/components/navigationmenu/NavigationMenu.d.ts

@@ -10,7 +10,7 @@ export interface NavigationMenuProps {
     actions?: Array<{
         id: string;
         label?: string;
-        onClick$?: QRL<() => void> | QRL<() => boolean>;
+        onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>>;
         icon?: JSXOutput | Component<unknown>;
     }>;
 }

package/lib-types/index.d.ts

@@ -2,3 +2,4 @@ export { Logo } from './components/logo/logo';
 export { Counter } from './components/counter/counter';
 export { Button } from './components/button/button';
 export { NavigationMenu } from './components/navigationmenu/NavigationMenu';
+export { Modal } from './components/modal/modal';

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+import { type ModalProps } from '../components/modal/modal';
+declare const meta: Meta<ModalProps>;
+export default meta;
+type Story = StoryObj<ModalProps>;
+export declare const Default: Story;
+export declare const WithoutTitle: Story;
+export declare const LongContent: Story;

package/package.json

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