@greghowe79/the-lib 2.1.0 → 2.1.2

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 (14) hide show
  1. package/lib/components/button/button.qwik.cjs +31 -22
  2. package/lib/components/button/button.qwik.mjs +32 -23
  3. package/lib/components/button/button.utils.qwik.cjs +29 -0
  4. package/lib/components/button/button.utils.qwik.mjs +29 -0
  5. package/lib/components/hero/hero.qwik.cjs +7 -4
  6. package/lib/components/hero/hero.qwik.mjs +7 -4
  7. package/lib/components/hero/styles.css.qwik.cjs +1 -1
  8. package/lib/components/hero/styles.css.qwik.mjs +1 -1
  9. package/lib-types/components/button/button.d.ts +9 -0
  10. package/lib-types/components/button/button.utils.d.ts +2 -0
  11. package/lib-types/components/hero/hero.d.ts +2 -0
  12. package/lib-types/stories/button.stories.d.ts +7 -0
  13. package/lib-types/stories/hero.stories.d.ts +3 -0
  14. package/package.json +1 -1
package/lib/components/button/button.qwik.cjs CHANGED
@@ -5,32 +5,41 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
7
  const loader = require("../loader/loader.qwik.cjs");
8
- const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
8
+ const button_utils = require("./button.utils.qwik.cjs");
9
+ const Button = qwik.component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
9
10
  qwik.useStylesScoped$(styles);
10
11
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
11
- return /* @__PURE__ */ jsxRuntime.jsxs("button", {
12
- id,
13
- type,
14
- class: [
15
- `button-${variant}`,
16
- `button-${size}`,
17
- disabled && "button-disabled",
18
- active && "button-active"
19
- ].filter(Boolean).join(" "),
20
- disabled,
21
- "aria-disabled": disabled,
22
- "aria-label": ariaLabel || (icon ? label : void 0),
23
- onClick$,
24
- "preventdefault:click": !!onClick$,
12
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
13
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
25
14
  children: [
26
- icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
27
- class: "button__icon",
28
- "aria-hidden": "true",
29
- children: typeof icon === "function" ? icon({}, null, 0) : icon
15
+ hasCustomStyles && /* @__PURE__ */ jsxRuntime.jsx("style", {
16
+ dangerouslySetInnerHTML: button_utils.generateCustomCSS(id, customColors)
30
17
  }),
31
- /* @__PURE__ */ jsxRuntime.jsx("span", {
32
- class: "button__text",
33
- children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
18
+ /* @__PURE__ */ jsxRuntime.jsxs("button", {
19
+ id,
20
+ type,
21
+ class: [
22
+ `button-${variant}`,
23
+ `button-${size}`,
24
+ disabled && "button-disabled",
25
+ active && "button-active"
26
+ ].filter(Boolean).join(" "),
27
+ disabled,
28
+ "aria-disabled": disabled,
29
+ "aria-label": ariaLabel || (icon ? label : void 0),
30
+ onClick$,
31
+ "preventdefault:click": !!onClick$,
32
+ children: [
33
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", {
34
+ class: "button__icon",
35
+ "aria-hidden": "true",
36
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
37
+ }),
38
+ /* @__PURE__ */ jsxRuntime.jsx("span", {
39
+ class: "button__text",
40
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(loader.Loader, {}) : label
41
+ })
42
+ ]
34
43
  })
35
44
  ]
36
45
  });
package/lib/components/button/button.qwik.mjs CHANGED
@@ -1,34 +1,43 @@
1
- import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
1
+ import { jsxs, Fragment, 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/latin-500.css";
5
5
  import { Loader } from "../loader/loader.qwik.mjs";
6
- const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false }) => {
6
+ import { generateCustomCSS } from "./button.utils.qwik.mjs";
7
+ const Button = component$(({ id, label, variant = "primary", icon, disabled = false, ariaLabel, type = "button", size = "md", onClick$, isLoading, active = false, customColors }) => {
7
8
  useStylesScoped$(styles);
8
9
  const loading = typeof isLoading === "object" && isLoading !== null && "value" in isLoading ? isLoading.value : isLoading;
9
- return /* @__PURE__ */ jsxs("button", {
10
- id,
11
- type,
12
- class: [
13
- `button-${variant}`,
14
- `button-${size}`,
15
- disabled && "button-disabled",
16
- active && "button-active"
17
- ].filter(Boolean).join(" "),
18
- disabled,
19
- "aria-disabled": disabled,
20
- "aria-label": ariaLabel || (icon ? label : void 0),
21
- onClick$,
22
- "preventdefault:click": !!onClick$,
10
+ const hasCustomStyles = customColors && (customColors.bg || customColors.text || customColors.border);
11
+ return /* @__PURE__ */ jsxs(Fragment, {
23
12
  children: [
24
- icon && /* @__PURE__ */ jsx("span", {
25
- class: "button__icon",
26
- "aria-hidden": "true",
27
- children: typeof icon === "function" ? icon({}, null, 0) : icon
13
+ hasCustomStyles && /* @__PURE__ */ jsx("style", {
14
+ dangerouslySetInnerHTML: generateCustomCSS(id, customColors)
28
15
  }),
29
- /* @__PURE__ */ jsx("span", {
30
- class: "button__text",
31
- children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
16
+ /* @__PURE__ */ jsxs("button", {
17
+ id,
18
+ type,
19
+ class: [
20
+ `button-${variant}`,
21
+ `button-${size}`,
22
+ disabled && "button-disabled",
23
+ active && "button-active"
24
+ ].filter(Boolean).join(" "),
25
+ disabled,
26
+ "aria-disabled": disabled,
27
+ "aria-label": ariaLabel || (icon ? label : void 0),
28
+ onClick$,
29
+ "preventdefault:click": !!onClick$,
30
+ children: [
31
+ icon && /* @__PURE__ */ jsx("span", {
32
+ class: "button__icon",
33
+ "aria-hidden": "true",
34
+ children: typeof icon === "function" ? icon({}, null, 0) : icon
35
+ }),
36
+ /* @__PURE__ */ jsx("span", {
37
+ class: "button__text",
38
+ children: loading ? /* @__PURE__ */ jsx(Loader, {}) : label
39
+ })
40
+ ]
32
41
  })
33
42
  ]
34
43
  });
package/lib/components/button/button.utils.qwik.cjs ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
+ function generateCustomCSS(id, colors) {
4
+ const isGradient = (value) => value?.includes("gradient");
5
+ const gradientFix = `
6
+ background-origin: border-box !important;
7
+ background-clip: padding-box !important;
8
+ `;
9
+ const baseStyles = [
10
+ colors.bg && `background: ${colors.bg} !important;`,
11
+ colors.bg && isGradient(colors.bg) && gradientFix,
12
+ colors.text && `color: ${colors.text} !important;`,
13
+ colors.border && `border: 2px solid ${colors.border} !important;`
14
+ ].filter(Boolean).join("\n");
15
+ const hoverBg = colors.hoverBg || colors.bg;
16
+ const hoverText = colors.hoverText || colors.text;
17
+ const hoverBorder = colors.hoverBorder || colors.border;
18
+ const hoverStyles = [
19
+ hoverBg && `background: ${hoverBg} !important;`,
20
+ hoverBg && isGradient(hoverBg) && gradientFix,
21
+ hoverText && `color: ${hoverText} !important;`,
22
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
23
+ ].filter(Boolean).join("\n");
24
+ return `
25
+ #${id} { ${baseStyles} }
26
+ #${id}:not(:disabled):hover { ${hoverStyles} }
27
+ `;
28
+ }
29
+ exports.generateCustomCSS = generateCustomCSS;
package/lib/components/button/button.utils.qwik.mjs ADDED
@@ -0,0 +1,29 @@
1
+ function generateCustomCSS(id, colors) {
2
+ const isGradient = (value) => value?.includes("gradient");
3
+ const gradientFix = `
4
+ background-origin: border-box !important;
5
+ background-clip: padding-box !important;
6
+ `;
7
+ const baseStyles = [
8
+ colors.bg && `background: ${colors.bg} !important;`,
9
+ colors.bg && isGradient(colors.bg) && gradientFix,
10
+ colors.text && `color: ${colors.text} !important;`,
11
+ colors.border && `border: 2px solid ${colors.border} !important;`
12
+ ].filter(Boolean).join("\n");
13
+ const hoverBg = colors.hoverBg || colors.bg;
14
+ const hoverText = colors.hoverText || colors.text;
15
+ const hoverBorder = colors.hoverBorder || colors.border;
16
+ const hoverStyles = [
17
+ hoverBg && `background: ${hoverBg} !important;`,
18
+ hoverBg && isGradient(hoverBg) && gradientFix,
19
+ hoverText && `color: ${hoverText} !important;`,
20
+ hoverBorder && `border: 2px solid ${hoverBorder} !important;`
21
+ ].filter(Boolean).join("\n");
22
+ return `
23
+ #${id} { ${baseStyles} }
24
+ #${id}:not(:disabled):hover { ${hoverStyles} }
25
+ `;
26
+ }
27
+ export {
28
+ generateCustomCSS
29
+ };
package/lib/components/hero/hero.qwik.cjs CHANGED
@@ -5,7 +5,7 @@ const qwik = require("@builder.io/qwik");
5
5
  const styles = require("./styles.css.qwik.cjs");
6
6
  require("@fontsource/roboto-condensed/latin-500.css");
7
7
  require("@fontsource/roboto-condensed/latin-400.css");
8
- const Hero = qwik.component$(({ title, content }) => {
8
+ const Hero = qwik.component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
9
9
  qwik.useStylesScoped$(styles);
10
10
  return /* @__PURE__ */ jsxRuntime.jsx("div", {
11
11
  class: "hero",
@@ -26,10 +26,13 @@ const Hero = qwik.component$(({ title, content }) => {
26
26
  /* @__PURE__ */ jsxRuntime.jsx("h1", {
27
27
  class: "headline-1",
28
28
  children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
29
- class: "title",
29
+ class: "hero_title",
30
30
  children: [
31
- /* @__PURE__ */ jsxRuntime.jsx("span", {
32
- children: "Dummy text"
31
+ highlightText && /* @__PURE__ */ jsxRuntime.jsx("span", {
32
+ style: {
33
+ color: highlightColor
34
+ },
35
+ children: highlightText
33
36
  }),
34
37
  " ",
35
38
  title
package/lib/components/hero/hero.qwik.mjs CHANGED
@@ -3,7 +3,7 @@ import { component$, useStylesScoped$, Slot } from "@builder.io/qwik";
3
3
  import styles from "./styles.css.qwik.mjs";
4
4
  import "@fontsource/roboto-condensed/latin-500.css";
5
5
  import "@fontsource/roboto-condensed/latin-400.css";
6
- const Hero = component$(({ title, content }) => {
6
+ const Hero = component$(({ title, content, highlightText, highlightColor = "#0095ae" }) => {
7
7
  useStylesScoped$(styles);
8
8
  return /* @__PURE__ */ jsx("div", {
9
9
  class: "hero",
@@ -24,10 +24,13 @@ const Hero = component$(({ title, content }) => {
24
24
  /* @__PURE__ */ jsx("h1", {
25
25
  class: "headline-1",
26
26
  children: /* @__PURE__ */ jsxs("span", {
27
- class: "title",
27
+ class: "hero_title",
28
28
  children: [
29
- /* @__PURE__ */ jsx("span", {
30
- children: "Dummy text"
29
+ highlightText && /* @__PURE__ */ jsx("span", {
30
+ style: {
31
+ color: highlightColor
32
+ },
33
+ children: highlightText
31
34
  }),
32
35
  " ",
33
36
  title
package/lib/components/hero/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
- const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
2
+ const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/hero/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
1
- const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
1
+ const styles = "/* .hero {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem;\r\n}\r\n\r\n.hero h1 {\r\n font-size: calc(1rem * 3);\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n.hero p {\r\n font-size: calc(1rem * 1);\r\n font-weight: 400;\r\n margin-bottom: 1.25rem;\r\n color: #333;\r\n}\r\n\r\n@media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\nh1 {\r\n margin: 0;\r\n}\r\n\r\n.hero {\r\n /* font-family: 'Roboto Condensed', sans-serif; */\r\n /* background-color: #f5f5f7;\r\n text-align: center;\r\n padding: 3.5rem 1.25rem; */\r\n margin: 0 1.75rem;\r\n -webkit-font-smoothing: antialiased;\r\n text-rendering: optimizeLegibility;\r\n}\r\n.hero-grid {\r\n display: grid;\r\n grid-column-gap: 1.75rem;\r\n grid-template-columns: repeat(4, minmax(0.313rem, 1fr));\r\n}\r\n\r\n.hero-grid .hero-grid__col--span-4-sm {\r\n display: block;\r\n grid-column-end: span 4;\r\n}\r\n\r\n.ion-hero-2up {\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.875rem;\r\n justify-content: space-between;\r\n position: relative;\r\n text-align: center;\r\n}\r\n\r\n.hero-2up__left-area {\r\n flex: 1.5;\r\n max-width: 100%;\r\n}\r\n\r\n.hero-2up__right-area {\r\n flex: 1;\r\n max-width: 28.375rem;\r\n width: 100%;\r\n}\r\n\r\n.headline-1,\r\n.content {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.headline-1 {\r\n font-size: 2.25rem;\r\n line-height: 1.2222222222;\r\n font-weight: 400;\r\n letter-spacing: -0.25px;\r\n margin-bottom: 1rem;\r\n overflow-wrap: anywhere;\r\n color: #333;\r\n}\r\n\r\n.hero_title {\r\n font-weight: 700;\r\n}\r\n\r\n.content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n}\r\n\r\n/* .hero h1 {\r\n font-size: calc(1rem * 3);\r\n\r\n color: #333;\r\n} */\r\n\r\n/* @media (min-width: 481px) {\r\n .hero {\r\n padding: 6.25rem 1.25rem;\r\n }\r\n\r\n .hero h1 {\r\n font-size: calc(1rem * 3.5);\r\n }\r\n\r\n .hero p {\r\n font-size: calc(1rem * 1.125);\r\n margin-bottom: 1.875rem;\r\n }\r\n} */\r\n\r\n@media (min-width: 600px) {\r\n .hero-2up__right-area {\r\n min-width: 19.375rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3rem;\r\n line-height: 1.1666666667;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 2.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 40px;\r\n grid-template-columns: repeat(12, minmax(0.313rem, 1fr));\r\n }\r\n\r\n .span-1-md {\r\n display: block;\r\n grid-column-end: span 1;\r\n }\r\n\r\n .span-10-md {\r\n display: block;\r\n grid-column-end: span 10;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero {\r\n margin: 0 4.5rem;\r\n }\r\n\r\n .hero-grid {\r\n grid-column-gap: 3rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n flex-direction: row;\r\n text-align: start;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n\r\n@media (min-width: 1440px) {\r\n .hero-2up__left-area {\r\n max-width: 35.438rem;\r\n }\r\n\r\n .ion-hero-2up {\r\n gap: 3.125rem;\r\n }\r\n\r\n .headline-1 {\r\n font-size: 3.75rem;\r\n line-height: 1.2;\r\n font-weight: 400;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .content {\r\n font-size: 1.125rem;\r\n line-height: 1.5555555556;\r\n font-weight: 400;\r\n letter-spacing: normal;\r\n }\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/lib-types/components/button/button.d.ts CHANGED
@@ -3,6 +3,14 @@ import '@fontsource/roboto-condensed/latin-500.css';
3
3
  export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'icon' | 'tertiary' | 'tab';
4
4
  export type ButtonType = 'button' | 'submit' | 'reset';
5
5
  export type ButtonSize = 'sm' | 'md' | 'lg';
6
+ export interface CustomColors {
7
+ bg?: string;
8
+ hoverBg?: string;
9
+ text?: string;
10
+ hoverText?: string;
11
+ border?: string;
12
+ hoverBorder?: string;
13
+ }
6
14
  export interface ButtonProps {
7
15
  id: string;
8
16
  label?: string;
@@ -15,5 +23,6 @@ export interface ButtonProps {
15
23
  onClick$?: QRL<() => void> | QRL<() => boolean> | QRL<() => Promise<void>> | QRL<(type: string | unknown) => Promise<void>>;
16
24
  isLoading?: boolean | Signal<boolean>;
17
25
  active?: boolean;
26
+ customColors?: CustomColors;
18
27
  }
19
28
  export declare const Button: Component<ButtonProps>;
package/lib-types/components/button/button.utils.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { CustomColors } from './button';
2
+ export declare function generateCustomCSS(id: string, colors: CustomColors): string;
package/lib-types/components/hero/hero.d.ts CHANGED
@@ -3,5 +3,7 @@ import '@fontsource/roboto-condensed/latin-400.css';
3
3
  export interface HeroProps {
4
4
  title?: string;
5
5
  content?: string;
6
+ highlightText?: string;
7
+ highlightColor?: string;
6
8
  }
7
9
  export declare const Hero: import("@builder.io/qwik").Component<HeroProps>;
package/lib-types/stories/button.stories.d.ts CHANGED
@@ -6,3 +6,10 @@ type Story = StoryObj<ButtonProps>;
6
6
  export declare const Primary: Story;
7
7
  export declare const WithIcon: Story;
8
8
  export declare const WithLoader: Story;
9
+ export declare const CustomSolidColor: Story;
10
+ export declare const CustomGradient: Story;
11
+ export declare const CustomOutlined: Story;
12
+ export declare const CustomSuccess: Story;
13
+ export declare const CustomWarning: Story;
14
+ export declare const CustomWithIcon: Story;
15
+ export declare const CustomWithBorder: Story;
package/lib-types/stories/hero.stories.d.ts CHANGED
@@ -4,3 +4,6 @@ declare const meta: Meta<HeroProps>;
4
4
  export default meta;
5
5
  type Story = StoryObj<HeroProps>;
6
6
  export declare const HeroWithText: Story;
7
+ export declare const HeroWithHighlight: Story;
8
+ export declare const HeroWithGradientHighlight: Story;
9
+ export declare const HeroNoHighlight: Story;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "2.1.0",
3
+ "version": "2.1.2",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",