@greghowe79/the-lib 0.6.2 → 0.6.3

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";
+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: 4rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 2rem;\r\n  font-weight: 400;\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";
+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: 4rem;\r\n  font-weight: 500;\r\n  margin-bottom: 1.25rem;\r\n  color: white;\r\n}\r\n\r\n.hero p {\r\n  font-size: 2rem;\r\n  font-weight: 400;\r\n  margin-bottom: 1.875rem;\r\n  color: white;\r\n}\r\n";
 export {
   styles as default
 };

package/lib/components/onboarding/onboardingsteps.qwik.cjs

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+require("@fontsource/roboto-condensed/500.css");
+const styles = require("./styles.css.qwik.cjs");
+const OnboardingSteps = qwik.component$(({ steps }) => {
+  qwik.useStylesScoped$(styles);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "steps-container",
+    children: steps.map((step) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: "step",
+      children: [
+        step.icon,
+        /* @__PURE__ */ jsxRuntime.jsx("h2", {
+          children: step.title
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", {
+          children: step.description
+        })
+      ]
+    }, step.id))
+  });
+});
+exports.OnboardingSteps = OnboardingSteps;

package/lib/components/onboarding/onboardingsteps.qwik.mjs

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+import "@fontsource/roboto-condensed/500.css";
+import styles from "./styles.css.qwik.mjs";
+const OnboardingSteps = component$(({ steps }) => {
+  useStylesScoped$(styles);
+  return /* @__PURE__ */ jsx("div", {
+    class: "steps-container",
+    children: steps.map((step) => /* @__PURE__ */ jsxs("div", {
+      class: "step",
+      children: [
+        step.icon,
+        /* @__PURE__ */ jsx("h2", {
+          children: step.title
+        }),
+        /* @__PURE__ */ jsx("p", {
+          children: step.description
+        })
+      ]
+    }, step.id))
+  });
+});
+export {
+  OnboardingSteps
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ".steps-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  padding: 2rem;\r\n  color: white;\r\n  justify-items: center;\r\n  width: 1000px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.step {\r\n  text-align: center;\r\n  max-width: 230px;\r\n  margin: 20px;\r\n  padding: 20px;\r\n  border-radius: 8px;\r\n  background-color: #00c9b7;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  transition:\r\n    transform 0.2s ease,\r\n    box-shadow 0.2s ease;\r\n}\r\n\r\n.step:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.step :global(svg) {\r\n  width: 200px;\r\n  height: 200px;\r\n  margin-bottom: 0.75rem;\r\n  display: inline-block;\r\n}\r\n\r\n.step h2 {\r\n  font-size: 2rem;\r\n  margin-bottom: 0.25rem;\r\n  font-weight: 500;\r\n}\r\n\r\n.step p {\r\n  font-size: 1rem;\r\n}\r\n";
+module.exports = styles;

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

@@ -0,0 +1,4 @@
+const styles = ".steps-container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  padding: 2rem;\r\n  color: white;\r\n  justify-items: center;\r\n  width: 1000px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.step {\r\n  text-align: center;\r\n  max-width: 230px;\r\n  margin: 20px;\r\n  padding: 20px;\r\n  border-radius: 8px;\r\n  background-color: #00c9b7;\r\n  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\r\n  transition:\r\n    transform 0.2s ease,\r\n    box-shadow 0.2s ease;\r\n}\r\n\r\n.step:hover {\r\n  transform: translateY(-5px);\r\n  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n.step :global(svg) {\r\n  width: 200px;\r\n  height: 200px;\r\n  margin-bottom: 0.75rem;\r\n  display: inline-block;\r\n}\r\n\r\n.step h2 {\r\n  font-size: 2rem;\r\n  margin-bottom: 0.25rem;\r\n  font-weight: 500;\r\n}\r\n\r\n.step p {\r\n  font-size: 1rem;\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -8,6 +8,7 @@ const modal = require("./components/modal/modal.qwik.cjs");
 const loader = require("./components/loader/loader.qwik.cjs");
 const input = require("./components/input/input.qwik.cjs");
 const hero = require("./components/hero/hero.qwik.cjs");
+const onboardingsteps = require("./components/onboarding/onboardingsteps.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
@@ -16,3 +17,4 @@ exports.Modal = modal.Modal;
 exports.Loader = loader.Loader;
 exports.Input = input.Input;
 exports.Hero = hero.Hero;
+exports.OnboardingSteps = onboardingsteps.OnboardingSteps;

package/lib/index.qwik.mjs

@@ -6,6 +6,7 @@ import { Modal } from "./components/modal/modal.qwik.mjs";
 import { Loader } from "./components/loader/loader.qwik.mjs";
 import { Input } from "./components/input/input.qwik.mjs";
 import { Hero } from "./components/hero/hero.qwik.mjs";
+import { OnboardingSteps } from "./components/onboarding/onboardingsteps.qwik.mjs";
 export {
   Button,
   Counter,
@@ -14,5 +15,6 @@ export {
   Loader,
   Logo,
   Modal,
-  NavigationMenu
+  NavigationMenu,
+  OnboardingSteps
 };

package/lib-types/components/onboarding/onboardingsteps.d.ts

@@ -0,0 +1,12 @@
+import { JSXOutput } from '@builder.io/qwik';
+import '@fontsource/roboto-condensed/500.css';
+export type StepProp = {
+    id: string;
+    icon: JSXOutput;
+    title: string;
+    description: string;
+};
+export interface StepsProps {
+    steps: StepProp[];
+}
+export declare const OnboardingSteps: import("@builder.io/qwik").Component<StepsProps>;

package/lib-types/index.d.ts

@@ -6,3 +6,4 @@ export { Modal } from './components/modal/modal';
 export { Loader } from './components/loader/loader';
 export { Input } from './components/input/input';
 export { Hero } from './components/hero/hero';
+export { OnboardingSteps } from './components/onboarding/onboardingsteps';

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+import { type StepsProps } from '../components/onboarding/onboardingsteps';
+declare const meta: Meta<StepsProps>;
+export default meta;
+type Story = StoryObj<StepsProps>;
+export declare const StepsCard: Story;

package/package.json

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