@greghowe79/the-lib 0.4.9 → 0.5.1

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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$ }) => {
+  qwik.useStylesScoped$(styles);
+  const internalError = qwik.useSignal(null);
+  const showError = error ?? internalError;
+  const inputHandler = qwik.$(async (_, elem) => {
+    if (onValidate$) {
+      const result = await onValidate$(elem.value);
+      if (!error) internalError.value = result;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "input-container",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", {
+        class: "input-label",
+        children: /* @__PURE__ */ jsxRuntime.jsx("input", {
+          id,
+          type,
+          class: `input ${showError.value ? "error" : ""}`,
+          placeholder,
+          "bind:value": value,
+          onInput$: inputHandler,
+          onBlur$: inputHandler,
+          required: true
+        })
+      }),
+      showError.value && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "error-message",
+        children: showError.value
+      })
+    ]
+  });
+});
+exports.Input = Input;

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

@@ -0,0 +1,40 @@
+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$ }) => {
+  useStylesScoped$(styles);
+  const internalError = useSignal(null);
+  const showError = error ?? internalError;
+  const inputHandler = $(async (_, elem) => {
+    if (onValidate$) {
+      const result = await onValidate$(elem.value);
+      if (!error) internalError.value = result;
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "input-container",
+    children: [
+      /* @__PURE__ */ jsx("label", {
+        class: "input-label",
+        children: /* @__PURE__ */ jsx("input", {
+          id,
+          type,
+          class: `input ${showError.value ? "error" : ""}`,
+          placeholder,
+          "bind:value": value,
+          onInput$: inputHandler,
+          onBlur$: inputHandler,
+          required: true
+        })
+      }),
+      showError.value && /* @__PURE__ */ jsx("div", {
+        class: "error-message",
+        children: showError.value
+      })
+    ]
+  });
+});
+export {
+  Input
+};

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

@@ -0,0 +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";
+module.exports = styles;

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

@@ -0,0 +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";
+export {
+  styles as default
+};

package/lib/index.qwik.cjs

@@ -6,9 +6,11 @@ const button = require("./components/button/button.qwik.cjs");
 const NavigationMenu = require("./components/navigationmenu/NavigationMenu.qwik.cjs");
 const modal = require("./components/modal/modal.qwik.cjs");
 const loader = require("./components/loader/loader.qwik.cjs");
+const input = require("./components/input/input.qwik.cjs");
 exports.Logo = logo.Logo;
 exports.Counter = counter.Counter;
 exports.Button = button.Button;
 exports.NavigationMenu = NavigationMenu.NavigationMenu;
 exports.Modal = modal.Modal;
 exports.Loader = loader.Loader;
+exports.Input = input.Input;

package/lib/index.qwik.mjs

@@ -4,9 +4,11 @@ import { Button } from "./components/button/button.qwik.mjs";
 import { NavigationMenu } from "./components/navigationmenu/NavigationMenu.qwik.mjs";
 import { Modal } from "./components/modal/modal.qwik.mjs";
 import { Loader } from "./components/loader/loader.qwik.mjs";
+import { Input } from "./components/input/input.qwik.mjs";
 export {
   Button,
   Counter,
+  Input,
   Loader,
   Logo,
   Modal,

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

@@ -0,0 +1,12 @@
+import { QRL, Signal } from '@builder.io/qwik';
+import '@fontsource/roboto-condensed/500.css';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'hidden' | 'checkbox' | 'radio' | 'file';
+export interface InputProps {
+    id: string;
+    type: InputType;
+    placeholder?: string;
+    value: Signal<string>;
+    error?: Signal<string | null>;
+    onValidate$?: QRL<(value: string) => Promise<string>>;
+}
+export declare const Input: import("@builder.io/qwik").Component<InputProps>;

package/lib-types/index.d.ts

@@ -4,3 +4,4 @@ export { Button } from './components/button/button';
 export { NavigationMenu } from './components/navigationmenu/NavigationMenu';
 export { Modal } from './components/modal/modal';
 export { Loader } from './components/loader/loader';
+export { Input } from './components/input/input';

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

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

package/package.json

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