@greghowe79/the-lib 0.9.5 → 0.9.6

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/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.5",
+  "version": "0.9.6",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",