@greghowe79/the-lib 0.8.6 → 0.8.7

package/lib/components/select/select.qwik.cjs

@@ -0,0 +1,60 @@
+"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 Select = qwik.component$(({ id, label, options, selected }) => {
+  qwik.useStylesScoped$(styles);
+  const handleChange$ = qwik.$((event) => {
+    const target = event.target;
+    selected.value = target.value;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    class: "select-container",
+    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      class: `select-wrapper ${selected.value ? "has-value" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("select", {
+          id,
+          name: id,
+          class: "select-element",
+          onChange$: handleChange$,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", {
+              value: "",
+              disabled: true,
+              selected: true,
+              hidden: true
+            }),
+            options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", {
+              value: option.value,
+              children: option.label
+            }, option.value))
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", {
+          for: id,
+          class: "select-label",
+          children: label
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          class: "select-arrow",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 32 32",
+            "aria-hidden": "true",
+            role: "presentation",
+            focusable: "false",
+            style: "display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", {
+              fill: "none",
+              d: "M28 12 16.7 23.3a1 1 0 0 1-1.4 0L4 12"
+            })
+          })
+        })
+      ]
+    })
+  });
+});
+exports.Select = Select;

package/lib/components/select/select.qwik.mjs

@@ -0,0 +1,60 @@
+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 Select = component$(({ id, label, options, selected }) => {
+  useStylesScoped$(styles);
+  const handleChange$ = $((event) => {
+    const target = event.target;
+    selected.value = target.value;
+  });
+  return /* @__PURE__ */ jsx("div", {
+    class: "select-container",
+    children: /* @__PURE__ */ jsxs("div", {
+      class: `select-wrapper ${selected.value ? "has-value" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("select", {
+          id,
+          name: id,
+          class: "select-element",
+          onChange$: handleChange$,
+          children: [
+            /* @__PURE__ */ jsx("option", {
+              value: "",
+              disabled: true,
+              selected: true,
+              hidden: true
+            }),
+            options.map((option) => /* @__PURE__ */ jsx("option", {
+              value: option.value,
+              children: option.label
+            }, option.value))
+          ]
+        }),
+        /* @__PURE__ */ jsx("label", {
+          for: id,
+          class: "select-label",
+          children: label
+        }),
+        /* @__PURE__ */ jsx("div", {
+          class: "select-arrow",
+          children: /* @__PURE__ */ jsx("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 32 32",
+            "aria-hidden": "true",
+            role: "presentation",
+            focusable: "false",
+            style: "display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 4; overflow: visible;",
+            children: /* @__PURE__ */ jsx("path", {
+              fill: "none",
+              d: "M28 12 16.7 23.3a1 1 0 0 1-1.4 0L4 12"
+            })
+          })
+        })
+      ]
+    })
+  });
+});
+export {
+  Select
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ".select-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  position: relative;\r\n  width: 100%;\r\n  /* max-width: 25rem; */ /* 400px */\r\n}\r\n\r\n.select-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.select-element {\r\n  width: 100%;\r\n  padding: 1.2rem 2.5rem 0.4rem 0.75rem;\r\n  font-size: 1rem;\r\n  border: 0.063rem solid #86868b; /* 1px */\r\n  border-radius: 0.375rem; /* 6px */\r\n  background-color: white;\r\n  appearance: none;\r\n  height: 3.4375rem; /* 55px */\r\n}\r\n\r\n.select-label {\r\n  position: absolute;\r\n  top: 1rem; /* 16px */\r\n  left: 0.75rem; /* 12px */\r\n  font-size: 1rem;\r\n  color: #888;\r\n  transition: all 0.2s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n.select-wrapper.has-value .select-label,\r\n.select-element:focus + .select-label {\r\n  top: 0.3rem; /* 4.8px */\r\n  left: 0.6rem; /* 9.6px */\r\n  font-size: 0.75rem;\r\n  color: #555;\r\n}\r\n\r\n.select-arrow {\r\n  position: absolute;\r\n  top: 50%;\r\n  right: 0.75rem; /* 12px */\r\n  transform: translateY(-50%);\r\n  pointer-events: none;\r\n  color: #666;\r\n}\r\n";
+module.exports = styles;

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

@@ -0,0 +1,4 @@
+const styles = ".select-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  position: relative;\r\n  width: 100%;\r\n  /* max-width: 25rem; */ /* 400px */\r\n}\r\n\r\n.select-wrapper {\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.select-element {\r\n  width: 100%;\r\n  padding: 1.2rem 2.5rem 0.4rem 0.75rem;\r\n  font-size: 1rem;\r\n  border: 0.063rem solid #86868b; /* 1px */\r\n  border-radius: 0.375rem; /* 6px */\r\n  background-color: white;\r\n  appearance: none;\r\n  height: 3.4375rem; /* 55px */\r\n}\r\n\r\n.select-label {\r\n  position: absolute;\r\n  top: 1rem; /* 16px */\r\n  left: 0.75rem; /* 12px */\r\n  font-size: 1rem;\r\n  color: #888;\r\n  transition: all 0.2s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n.select-wrapper.has-value .select-label,\r\n.select-element:focus + .select-label {\r\n  top: 0.3rem; /* 4.8px */\r\n  left: 0.6rem; /* 9.6px */\r\n  font-size: 0.75rem;\r\n  color: #555;\r\n}\r\n\r\n.select-arrow {\r\n  position: absolute;\r\n  top: 50%;\r\n  right: 0.75rem; /* 12px */\r\n  transform: translateY(-50%);\r\n  pointer-events: none;\r\n  color: #666;\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -9,6 +9,7 @@ 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");
+const select = require("./components/select/select.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
@@ -18,3 +19,4 @@ exports.Loader = loader.Loader;
 exports.Input = input.Input;
 exports.Hero = hero.Hero;
 exports.OnboardingSteps = onboardingsteps.OnboardingSteps;
+exports.Select = select.Select;

package/lib/index.qwik.mjs

@@ -7,6 +7,7 @@ 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";
+import { Select } from "./components/select/select.qwik.mjs";
 export {
   Button,
   Counter,
@@ -16,5 +17,6 @@ export {
   Logo,
   Modal,
   NavigationMenu,
-  OnboardingSteps
+  OnboardingSteps,
+  Select
 };

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

@@ -0,0 +1,12 @@
+import { Signal } from '@builder.io/qwik';
+import '@fontsource/roboto-condensed/500.css';
+export interface SelectProps {
+    id: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    label: string;
+    selected: Signal<string>;
+}
+export declare const Select: import("@builder.io/qwik").Component<SelectProps>;

package/lib-types/index.d.ts

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

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

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

package/package.json

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