@greghowe79/the-lib 0.6.0 → 0.6.2

package/lib/components/hero/hero.qwik.cjs

@@ -6,7 +6,7 @@ const styles = require("./styles.css.qwik.cjs");
 require("@fontsource/roboto-condensed/500.css");
 const Hero = qwik.component$(({ title, content }) => {
   qwik.useStylesScoped$(styles);
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "hero",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("h1", {

package/lib/components/hero/hero.qwik.mjs

@@ -4,7 +4,7 @@ import styles from "./styles.css.qwik.mjs";
 import "@fontsource/roboto-condensed/500.css";
 const Hero = component$(({ title, content }) => {
   useStylesScoped$(styles);
-  return /* @__PURE__ */ jsxs("section", {
+  return /* @__PURE__ */ jsxs("div", {
     class: "hero",
     children: [
       /* @__PURE__ */ jsx("h1", {

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

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: rgb(0, 51, 153);\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: 3rem;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 1.5rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.875rem;\r\n  color: white;\r\n}\r\n.child_wrapper {\r\n  max-width: 500px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n}\r\n";
+const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: rgb(0, 51, 153);\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: 3rem;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 1.5rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.875rem;\r\n  color: white;\r\n}\r\n";
 module.exports = styles;

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

@@ -1,4 +1,4 @@
-const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: rgb(0, 51, 153);\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: 3rem;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 1.5rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.875rem;\r\n  color: white;\r\n}\r\n.child_wrapper {\r\n  max-width: 500px;\r\n  margin: 0 auto;\r\n  width: 100%;\r\n}\r\n";
+const styles = ".hero {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  background-color: rgb(0, 51, 153);\r\n  text-align: center;\r\n  padding: 6.25rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n  font-size: 3rem;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 1.5rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.875rem;\r\n  color: white;\r\n}\r\n";
 export {
   styles as default
 };

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

@@ -4,7 +4,7 @@ const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const styles = require("./styles.css.qwik.cjs");
 require("@fontsource/roboto-condensed/500.css");
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$ }) => {
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
@@ -22,7 +22,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
     class: "input-container",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", {
-        class: "input-label",
+        class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsxRuntime.jsx("input", {
           id,
           type,

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, useStylesScoped$, useSignal, $ } from "@builder.io/qwik";
 import styles from "./styles.css.qwik.mjs";
 import "@fontsource/roboto-condensed/500.css";
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$ }) => {
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
   const showError = error ?? internalError;
@@ -20,7 +20,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
     class: "input-container",
     children: [
       /* @__PURE__ */ jsx("label", {
-        class: "input-label",
+        class: `input-label ${bgLight ? "bg_light" : ""}`,
         children: /* @__PURE__ */ jsx("input", {
           id,
           type,

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

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n";
+const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n";
 module.exports = styles;

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

@@ -1,4 +1,4 @@
-const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n";
+const styles = ".input-label:not([type='checkbox']) {\r\n  border-radius: 8px;\r\n  font-size: 13px;\r\n  line-height: 1.85;\r\n  letter-spacing: 1px;\r\n  color: #333;\r\n  position: relative;\r\n  height: 50px;\r\n  display: flex;\r\n  min-width: 0;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    color 0.3s ease,\r\n    box-shadow 0.3s ease,\r\n    background 0.3s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n  background: white;\r\n}\r\n\r\n.input {\r\n  background: transparent;\r\n  padding: 0 15px;\r\n  flex: 1;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: inherit;\r\n  height: 100%;\r\n  border: none;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n  opacity: 0.4;\r\n}\r\n\r\n.input:focus {\r\n  outline: none;\r\n  opacity: 1;\r\n}\r\n\r\n.error-message {\r\n  color: #e74c3c;\r\n  font-size: 0.875rem;\r\n  margin-top: 0.25rem;\r\n  font-size: 16px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n";
 export {
   styles as default
 };

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

@@ -9,5 +9,6 @@ export interface InputProps {
     error?: Signal<string | null>;
     onValidate$?: QRL<(value: string) => Promise<string>>;
     onInput$?: QRL<() => void>;
+    bgLight?: boolean;
 }
 export declare const Input: import("@builder.io/qwik").Component<InputProps>;

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

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

package/package.json

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