@greghowe79/the-lib 2.0.4 → 2.0.6

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

@@ -1,3 +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.75rem;\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\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n";
+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.75rem;\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\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.counter {\r\n  text-align: right;\r\n  font-size: 12px;\r\n  color: #888;\r\n  margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n  color: #e53935;\r\n} */\r\n\r\n.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.75rem;\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 1.5rem 0.75rem 0.9375rem;\r\n  resize: vertical;\r\n  min-height: 3.29412rem;\r\n  border: none;\r\n  outline: 1px solid transparent;\r\n  outline-offset: -1px;\r\n  transition:\r\n    color 0.15s ease,\r\n    outline-color 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: 2px solid #007aff;\r\n  outline-offset: -2px;\r\n  background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n  background: white;\r\n  outline: 1px solid #86868b;\r\n  outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n  outline: 2px solid #007aff;\r\n  outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n  width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n  background: transparent;\r\n  margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n  background: #ccc;\r\n  border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n  display: none;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.counter {\r\n  text-align: right;\r\n  font-size: 12px;\r\n  color: #888;\r\n  margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n  color: #e53935;\r\n}\r\n";
 module.exports = styles;

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

@@ -1,4 +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.75rem;\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\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n";
+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.75rem;\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\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.counter {\r\n  text-align: right;\r\n  font-size: 12px;\r\n  color: #888;\r\n  margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n  color: #e53935;\r\n} */\r\n\r\n.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.75rem;\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 1.5rem 0.75rem 0.9375rem;\r\n  resize: vertical;\r\n  min-height: 3.29412rem;\r\n  border: none;\r\n  outline: 1px solid transparent;\r\n  outline-offset: -1px;\r\n  transition:\r\n    color 0.15s ease,\r\n    outline-color 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: 2px solid #007aff;\r\n  outline-offset: -2px;\r\n  background: white;\r\n}\r\n\r\n.text-area.bg_light {\r\n  background: white;\r\n  outline: 1px solid #86868b;\r\n  outline-offset: -1px;\r\n}\r\n\r\n.text-area.bg_light:focus {\r\n  outline: 2px solid #007aff;\r\n  outline-offset: -2px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar {\r\n  width: 6px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-track {\r\n  background: transparent;\r\n  margin: 0.75rem 0;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-thumb {\r\n  background: #ccc;\r\n  border-radius: 3px;\r\n}\r\n\r\n.text-area::-webkit-scrollbar-button {\r\n  display: none;\r\n}\r\n\r\n.sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.counter {\r\n  text-align: right;\r\n  font-size: 12px;\r\n  color: #888;\r\n  margin-top: 4px;\r\n}\r\n\r\n.counter-limit {\r\n  color: #e53935;\r\n}\r\n";
 export {
   styles as default
 };

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

@@ -4,8 +4,9 @@ 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, maxLength }) => {
+const TextArea = qwik.component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
   qwik.useStylesScoped$(styles);
+  const currentLength = content?.value?.length ?? 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "text-area-container",
     children: [
@@ -25,6 +26,14 @@ const TextArea = qwik.component$(({ id, title, content, required = false, placeh
         class: `text-area ${bgLight ? "bg_light" : ""}`,
         maxLength,
         children: content.value
+      }),
+      showCounter && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
+        children: [
+          currentLength,
+          "/",
+          maxLength
+        ]
       })
     ]
   });

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

@@ -2,8 +2,9 @@ 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, maxLength }) => {
+const TextArea = component$(({ id, title, content, required = false, placeholder, bgLight, maxLength, showCounter = false }) => {
   useStylesScoped$(styles);
+  const currentLength = content?.value?.length ?? 0;
   return /* @__PURE__ */ jsxs("div", {
     class: "text-area-container",
     children: [
@@ -23,6 +24,14 @@ const TextArea = component$(({ id, title, content, required = false, placeholder
         class: `text-area ${bgLight ? "bg_light" : ""}`,
         maxLength,
         children: content.value
+      }),
+      showCounter && maxLength && /* @__PURE__ */ jsxs("div", {
+        class: `counter ${currentLength >= maxLength ? "counter-limit" : ""}`,
+        children: [
+          currentLength,
+          "/",
+          maxLength
+        ]
       })
     ]
   });

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

@@ -8,5 +8,6 @@ export interface TextAreaProps {
     placeholder?: string;
     bgLight?: boolean;
     maxLength?: number;
+    showCounter?: boolean;
 }
 export declare const TextArea: import("@builder.io/qwik").Component<TextAreaProps>;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<TextAreaProps>;
 export default meta;
 type Story = StoryObj<TextAreaProps>;
 export declare const TextAreaWithHideLabel: Story;
+export declare const TextAreaWithCounter: Story;

package/package.json

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