@greghowe79/the-lib 0.9.4 → 0.9.6

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

@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix }) => {
+const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false }) => {
   qwik.useStylesScoped$(styles);
   const internalError = qwik.useSignal(null);
   const showError = error ?? internalError;
@@ -72,7 +72,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
                   name: id,
                   accept: ".png, .jpg, .jpeg, .avif",
                   onChange$: (_, el) => uploadImage(_, el, currentFile, selectedFile),
-                  required: true
+                  required
                 })
               ]
             }),
@@ -108,7 +108,8 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
               "bind:value": value,
               onInput$: inputHandler,
               onBlur$: inputHandler,
-              maxLength: 14
+              maxLength: 14,
+              required
             })
           ]
         })
@@ -130,7 +131,7 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
               "bind:value": value,
               onInput$: inputHandler,
               onBlur$: inputHandler,
-              required: true
+              required
             })
           ]
         })

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

@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
     if (selectedFile) selectedFile.value = file.name;
   }
 });
-const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix }) => {
+const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false }) => {
   useStylesScoped$(styles);
   const internalError = useSignal(null);
   const showError = error ?? internalError;
@@ -70,7 +70,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
                   name: id,
                   accept: ".png, .jpg, .jpeg, .avif",
                   onChange$: (_, el) => uploadImage(_, el, currentFile, selectedFile),
-                  required: true
+                  required
                 })
               ]
             }),
@@ -106,7 +106,8 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
               "bind:value": value,
               onInput$: inputHandler,
               onBlur$: inputHandler,
-              maxLength: 14
+              maxLength: 14,
+              required
             })
           ]
         })
@@ -128,7 +129,7 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
               "bind:value": value,
               onInput$: inputHandler,
               onBlur$: inputHandler,
-              required: true
+              required
             })
           ]
         })

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

@@ -0,0 +1,3 @@
+"use strict";
+const styles = ".text-area-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.25rem;\r\n  width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n  font-size: 0.8125rem;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n  border-radius: 0.5rem;\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: #333;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  padding: 0.75rem 0.9375rem;\r\n  resize: vertical;\r\n  min-height: 3.29412rem;\r\n  border: none;\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n  outline: none;\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n  background: white;\r\n}\r\n.text-area.bg_light {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n";
+module.exports = styles;

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

@@ -0,0 +1,4 @@
+const styles = ".text-area-container {\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.25rem;\r\n  width: 100%;\r\n}\r\n\r\n.text-area-container label {\r\n  font-size: 0.8125rem;\r\n  letter-spacing: 0.0625rem;\r\n  color: #333;\r\n  padding-left: 0.25rem;\r\n}\r\n\r\n.text-area {\r\n  border-radius: 0.5rem;\r\n  font-size: 1rem;\r\n  line-height: 1.5;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 100;\r\n  letter-spacing: inherit;\r\n  color: #333;\r\n  background: rgba(0, 0, 0, 0.04);\r\n  padding: 0.75rem 0.9375rem;\r\n  resize: vertical;\r\n  min-height: 3.29412rem;\r\n  border: none;\r\n  transition:\r\n    color 0.15s ease,\r\n    box-shadow 0.15s ease,\r\n    background 0.15s ease;\r\n}\r\n\r\n.text-area::placeholder {\r\n  color: #6e6e73;\r\n}\r\n\r\n.text-area:focus {\r\n  outline: none;\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n  background: white;\r\n}\r\n.text-area.bg_light {\r\n  background: white;\r\n  box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n  box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n";
+export {
+  styles as default
+};

package/lib/components/text_area/text_area.qwik.cjs

@@ -0,0 +1,30 @@
+"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 TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight }) => {
+  qwik.useStylesScoped$(styles);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "text-area-container",
+    children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("label", {
+        for: id,
+        children: title
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("textarea", {
+        id,
+        name: "story",
+        rows: 5,
+        cols: 33,
+        "bind:value": content,
+        required,
+        placeholder,
+        class: `text-area ${bgLight ? "bg_light" : ""}`,
+        children: content.value
+      })
+    ]
+  });
+});
+exports.TextArea = TextArea;

package/lib/components/text_area/text_area.qwik.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, useStylesScoped$ } from "@builder.io/qwik";
+import styles from "./styles.css.qwik.mjs";
+import "@fontsource/roboto-condensed/500.css";
+const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight }) => {
+  useStylesScoped$(styles);
+  return /* @__PURE__ */ jsxs("div", {
+    class: "text-area-container",
+    children: [
+      title && /* @__PURE__ */ jsx("label", {
+        for: id,
+        children: title
+      }),
+      /* @__PURE__ */ jsx("textarea", {
+        id,
+        name: "story",
+        rows: 5,
+        cols: 33,
+        "bind:value": content,
+        required,
+        placeholder,
+        class: `text-area ${bgLight ? "bg_light" : ""}`,
+        children: content.value
+      })
+    ]
+  });
+});
+export {
+  TextArea
+};

package/lib/index.qwik.cjs

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

package/lib/index.qwik.mjs

@@ -8,6 +8,7 @@ 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";
+import { TextArea } from "./components/text_area/text_area.qwik.mjs";
 export {
   Button,
   Counter,
@@ -18,5 +19,6 @@ export {
   Modal,
   NavigationMenu,
   OnboardingSteps,
-  Select
+  Select,
+  TextArea
 };

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

@@ -14,6 +14,7 @@ export interface InputProps {
     selectedFile?: Signal<string>;
     icon?: JSXOutput | Component<unknown>;
     prefix?: string;
+    required?: boolean;
 }
 export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
 export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;

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

@@ -0,0 +1,11 @@
+import { Signal } from '@builder.io/qwik';
+import '@fontsource/roboto-condensed/500.css';
+export interface TextAreaProps {
+    id: string;
+    title?: string;
+    content: Signal<string>;
+    required?: boolean;
+    placeholder?: string;
+    bgLight?: boolean;
+}
+export declare const TextArea: import("@builder.io/qwik").Component<TextAreaProps>;

package/lib-types/index.d.ts

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

package/lib-types/stories/text-area.stories.d.ts

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

package/package.json

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