@greghowe79/the-lib 0.0.9 → 0.1.1

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

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
-const styles_css = require("./styles.css.qwik.cjs");
+const styles = require("./styles.css.qwik.cjs");
 const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$ }) => {
+  qwik.useStylesScoped$(styles);
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
     id,
     type,
     class: [
-      styles_css.buttonVariants[variant],
-      styles_css.buttonSizeVariants[size],
-      disabled && styles_css.disabledStyle
-    ],
+      `button-${variant}`,
+      `button-${size}`,
+      disabled && "button-disabled"
+    ].filter(Boolean).join(" "),
     disabled,
     "aria-disabled": disabled,
     "aria-label": ariaLabel || (icon ? label : void 0),

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

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$ } from "@builder.io/qwik";
-import { buttonVariants, buttonSizeVariants, disabledStyle } from "./styles.css.qwik.mjs";
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
 const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$ }) => {
+  useStylesScoped$(styles);
   return /* @__PURE__ */ jsxs("button", {
     id,
     type,
     class: [
-      buttonVariants[variant],
-      buttonSizeVariants[size],
-      disabled && disabledStyle
-    ],
+      `button-${variant}`,
+      `button-${size}`,
+      disabled && "button-disabled"
+    ].filter(Boolean).join(" "),
     disabled,
     "aria-disabled": disabled,
     "aria-label": ariaLabel || (icon ? label : void 0),

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

@@ -1,9 +1,3 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                 */
-var buttonVariants = { primary: "styles_buttonVariants_primary__1j35qve0", secondary: "styles_buttonVariants_secondary__1j35qve1", danger: "styles_buttonVariants_danger__1j35qve2" };
-var buttonSizeVariants = { sm: "styles_buttonSizeVariants_sm__1j35qve3", md: "styles_buttonSizeVariants_md__1j35qve4", lg: "styles_buttonSizeVariants_lg__1j35qve5" };
-var disabledStyle = "styles__1j35qve6";
-exports.buttonSizeVariants = buttonSizeVariants;
-exports.buttonVariants = buttonVariants;
-exports.disabledStyle = disabledStyle;
+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, 82, 204);\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, #6c757d, #5a6268);\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, #dc3545, #c82333);\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  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  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  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/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n";
+module.exports = styles;

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

@@ -1,9 +1,4 @@
-/* empty css                                */
-var buttonVariants = { primary: "styles_buttonVariants_primary__1j35qve0", secondary: "styles_buttonVariants_secondary__1j35qve1", danger: "styles_buttonVariants_danger__1j35qve2" };
-var buttonSizeVariants = { sm: "styles_buttonSizeVariants_sm__1j35qve3", md: "styles_buttonSizeVariants_md__1j35qve4", lg: "styles_buttonSizeVariants_lg__1j35qve5" };
-var disabledStyle = "styles__1j35qve6";
+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, 82, 204);\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, #6c757d, #5a6268);\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, #dc3545, #c82333);\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  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  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  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/* Disabled state */\r\n.button-disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n";
 export {
-  buttonSizeVariants,
-  buttonVariants,
-  disabledStyle
+  styles as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -10,9 +10,6 @@
       "import": "./lib/index.qwik.mjs",
       "require": "./lib/index.qwik.cjs",
       "types": "./lib-types/index.d.ts"
-    },
-    "./assets/BefodwuD-style.css": {
-      "import": "./lib/assets/BefodwuD-style.css"
     }
   },
   "files": [

package/lib/assets/BefodwuD-style.css

@@ -1,107 +0,0 @@
-.styles_buttonVariants_primary__1j35qve0 {
-  display: inline-block;
-  outline: none;
-  border-width: 0px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  font-weight: 500;
-  max-width: 100%;
-  text-align: center;
-  text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
-  background: rgb(0, 82, 204);
-  cursor: pointer;
-  height: 32px;
-  line-height: 32px;
-  padding: 0px 12px;
-  vertical-align: middle;
-  width: auto;
-  font-size: 14px;
-  color: rgb(255, 255, 255);
-}
-.styles_buttonVariants_primary__1j35qve0:hover {
-  background: rgb(0, 101, 255);
-  text-decoration: inherit;
-  transition-duration: 0s, 0.15s;
-  color: rgb(255, 255, 255);
-}
-.styles_buttonVariants_secondary__1j35qve1 {
-  display: inline-block;
-  outline: none;
-  border-width: 0px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  font-weight: 500;
-  max-width: 100%;
-  text-align: center;
-  text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
-  background: linear-gradient(to right, #6c757d, #5a6268);
-  cursor: pointer;
-  height: 32px;
-  line-height: 32px;
-  padding: 0px 12px;
-  vertical-align: middle;
-  width: auto;
-  font-size: 14px;
-  color: white;
-}
-.styles_buttonVariants_secondary__1j35qve1:hover {
-  background: linear-gradient(to right, #5a6268, #4e555b);
-  text-decoration: inherit;
-  transition-duration: 0s, 0.15s;
-  color: white;
-}
-.styles_buttonVariants_danger__1j35qve2 {
-  display: inline-block;
-  outline: none;
-  border-width: 0px;
-  border-radius: 3px;
-  box-sizing: border-box;
-  font-weight: 500;
-  max-width: 100%;
-  text-align: center;
-  text-decoration: none;
-  transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
-  background: linear-gradient(to right, #dc3545, #c82333);
-  cursor: pointer;
-  height: 32px;
-  line-height: 32px;
-  padding: 0px 12px;
-  vertical-align: middle;
-  width: auto;
-  font-size: 14px;
-  color: white;
-}
-.styles_buttonVariants_danger__1j35qve2:hover {
-  background: linear-gradient(to right, #c82333, #bd2130);
-  text-decoration: inherit;
-  transition-duration: 0s, 0.15s;
-  color: white;
-}
-.styles_buttonSizeVariants_sm__1j35qve3 {
-  font-size: 1rem;
-  height: 100%;
-  line-height: 1.25rem;
-  padding: 0.875rem 1.5rem;
-  border-radius: 0.5rem;
-  width: 100%;
-}
-.styles_buttonSizeVariants_md__1j35qve4 {
-  font-size: 14px;
-  height: 32px;
-  line-height: 32px;
-  padding: 0 12px;
-  width: auto;
-}
-.styles_buttonSizeVariants_lg__1j35qve5 {
-  font-size: 16px;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 16px;
-  width: auto;
-}
-.styles__1j35qve6 {
-  opacity: 0.6;
-  cursor: not-allowed;
-}