@elmethis/qwik 0.0.21 → 0.0.22

package/lib/index.qwik.cjs

@@ -10,7 +10,7 @@ const marked = require("marked");
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$t = {
+const styles$u = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -70,7 +70,7 @@ const Typescript = qwik.component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$s = {
+const styles$t = {
   path
 };
 const Bash = qwik.component$(({ size = 24, ...props }) => {
@@ -86,7 +86,7 @@ const Bash = qwik.component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
-        class: styles$s.path,
+        class: styles$t.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("path", {
@@ -526,13 +526,13 @@ const C = qwik.component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$3 = "_icon_1gvln_1";
-const styles$r = {
-  icon: icon$3
+const icon$4 = "_icon_1gvln_1";
+const styles$s = {
+  icon: icon$4
 };
 const ElmMdiIcon = qwik.component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", {
-    class: styles$r.icon,
+    class: styles$s.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -641,7 +641,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$q = {
+const styles$r = {
   text: text$3,
   code: code$1,
   kbd,
@@ -651,17 +651,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$2 = "_icon_19g82_1";
-const styles$p = {
-  icon: icon$2
+const icon$3 = "_icon_19g82_1";
+const styles$q = {
+  icon: icon$3
 };
 const ElmInlineIcon = qwik.component$(({ src, alt }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("span", {
-    class: styles$p.icon,
+    class: styles$q.icon,
     children: /* @__PURE__ */ jsxRuntime.jsx("img", {
       src,
       alt,
-      class: styles$p.icon
+      class: styles$q.icon
     })
   });
 });
@@ -672,7 +672,7 @@ const ElmInlineText = qwik.component$((props) => {
   }) : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("kbd", {
-      class: styles$q.kbd,
+      class: styles$r.kbd,
       children: vnode
     });
   }
@@ -698,13 +698,13 @@ const ElmInlineText = qwik.component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsxRuntime.jsx("code", {
-      class: styles$q.code,
+      class: styles$r.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxRuntime.jsxs("ruby", {
-      class: styles$q.text,
+      class: styles$r.text,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", {
           children: vnode
@@ -717,7 +717,7 @@ const ElmInlineText = qwik.component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsxRuntime.jsx("span", {
     class: [
-      styles$q.text,
+      styles$r.text,
       textStyles.text
     ],
     style: {
@@ -729,7 +729,7 @@ const ElmInlineText = qwik.component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxRuntime.jsxs("a", {
-      class: styles$q.link,
+      class: styles$r.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -747,7 +747,7 @@ const ElmInlineText = qwik.component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$o = {
+const styles$p = {
   code
 };
 const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" }) => {
@@ -772,7 +772,7 @@ const ElmShikiHighlighter = qwik.component$(({ code: code2, language = "txt" })
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("pre", {
-    class: styles$o.code,
+    class: styles$p.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -791,19 +791,19 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {
-    class: styles$t["code-block"],
+    class: styles$u["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$t["language-icon"],
+        class: styles$u["language-icon"],
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: styles$t.caption,
+        class: styles$u.caption,
         children: /* @__PURE__ */ jsxRuntime.jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -812,7 +812,7 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$t["copy-icon"],
+        class: styles$u["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -821,10 +821,10 @@ const ElmCodeBlock = qwik.component$(({ code: code2, language = "txt", caption:
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("hr", {
-        class: styles$t.divider
+        class: styles$u.divider
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$t.code,
+        class: styles$u.code,
         children: /* @__PURE__ */ jsxRuntime.jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -844,7 +844,7 @@ const ElmKatex = qwik.component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$n = {
+const styles$o = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -853,13 +853,13 @@ const ElmParallax = qwik.component$(({ images }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$n["parallax-watcher"],
+        class: styles$o["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$n.parallax,
+        class: styles$o.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -873,7 +873,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$m = {
+const styles$n = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -901,29 +901,29 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: [
-      styles$m.toggle,
+      styles$n.toggle,
       {
-        [styles$m["toggle-open"]]: isOpen.value,
-        [styles$m["toggle-closed"]]: !isOpen.value
+        [styles$n["toggle-open"]]: isOpen.value,
+        [styles$n["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
         class: [
-          styles$m.summary,
+          styles$n.summary,
           {
-            [styles$m["summary-open"]]: isOpen.value,
-            [styles$m["summary-closed"]]: !isOpen.value
+            [styles$n["summary-open"]]: isOpen.value,
+            [styles$n["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$m["chevron-icon"],
+              styles$n["chevron-icon"],
               {
-                [styles$m["chevron-icon-open"]]: isOpen.value,
-                [styles$m["chevron-icon-closed"]]: !isOpen.value
+                [styles$n["chevron-icon-open"]]: isOpen.value,
+                [styles$n["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -931,17 +931,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["summary-text"],
+            class: styles$n["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
             class: [
-              styles$m["plus-icon"],
+              styles$n["plus-icon"],
               {
-                [styles$m["plus-icon-open"]]: isOpen.value,
-                [styles$m["plus-icon-closed"]]: !isOpen.value
+                [styles$n["plus-icon-open"]]: isOpen.value,
+                [styles$n["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
@@ -954,30 +954,30 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: [
-          styles$m.content,
+          styles$n.content,
           {
-            [styles$m["content-open"]]: isOpen.value,
-            [styles$m["content-closed"]]: !isOpen.value
+            [styles$n["content-open"]]: isOpen.value,
+            [styles$n["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        class: styles$m.footer,
+        class: styles$n.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
@@ -987,17 +987,17 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsxRuntime.jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsxRuntime.jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
               d: js.mdiChevronRight,
               color: "gray"
@@ -1008,50 +1008,50 @@ const ElmToggle = qwik.component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$l = {
+const styles$m = {
   "block-fallback": "_block-fallback_rt986_1"
 };
-const wrapper$1 = "_wrapper_1yktj_12";
+const wrapper$2 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$k = {
-  wrapper: wrapper$1,
+const styles$l = {
+  wrapper: wrapper$2,
   dot
 };
 const ElmDotLoadingIcon = qwik.component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$k.wrapper,
+    class: styles$l.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsxRuntime.jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$j = {
+const styles$k = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = qwik.component$(() => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     "aria-hidden": "true",
-    class: styles$j["rectangle-wave"]
+    class: styles$k["rectangle-wave"]
   });
 });
 const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    class: styles$l["block-fallback"],
+    class: styles$m["block-fallback"],
     style: {
       "--height": height
     },
@@ -1061,6 +1061,153 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
     ]
   });
 });
+const loading = "_loading_1yj0v_19";
+const wrapper$1 = "_wrapper_1yj0v_33";
+const active = "_active_1yj0v_55";
+const header$1 = "_header_1yj0v_59";
+const label = "_label_1yj0v_67";
+const requierd = "_requierd_1yj0v_82";
+const body$1 = "_body_1yj0v_88";
+const input = "_input_1yj0v_109";
+const icon$2 = "_icon_1yj0v_136";
+const suffix = "_suffix_1yj0v_153";
+const styles$j = {
+  loading,
+  wrapper: wrapper$1,
+  active,
+  header: header$1,
+  label,
+  requierd,
+  body: body$1,
+  input,
+  "icon-box": "_icon-box_1yj0v_136",
+  icon: icon$2,
+  suffix
+};
+const ElmTextField = qwik.component$((props) => {
+  const id = qwik.useId();
+  const isFocused = qwik.useSignal(false);
+  const inputType = qwik.useSignal(props.isPassword ? "password" : "text");
+  const internalValue = qwik.useSignal("");
+  const input2 = props.value ?? internalValue;
+  const handleDelete = qwik.$(() => {
+    if (!props.loading && !props.disabled) {
+      input2.value = "";
+    }
+  });
+  const handleVisibleSwitch = qwik.$(() => {
+    if (!props.loading && !props.disabled) {
+      inputType.value = inputType.value === "text" ? "password" : "text";
+    }
+  });
+  const iconMap = {
+    text: js.mdiText,
+    pen: js.mdiPen,
+    email: js.mdiEmail,
+    user: js.mdiAccount,
+    lock: js.mdiLock,
+    key: js.mdiKey,
+    earth: js.mdiEarth,
+    tag: js.mdiTag,
+    archive: js.mdiArchive,
+    link: js.mdiLinkVariant,
+    search: js.mdiMagnify
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: [
+      styles$j.wrapper,
+      isFocused.value && styles$j.active
+    ],
+    style: {
+      backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
+      "--highlight-color": isFocused.value ? "#bfa056" : void 0
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: styles$j.header,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", {
+            for: id,
+            class: styles$j.label,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                children: props.label
+              }),
+              props.required && /* @__PURE__ */ jsxRuntime.jsx("span", {
+                class: styles$j.requierd,
+                children: "*"
+              })
+            ]
+          }),
+          props.maxLength != null && /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+            text: `${input2.value.length} / ${props.maxLength}`,
+            color: input2.value.length > props.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        class: styles$j.body,
+        children: [
+          props.icon && /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+            d: iconMap[props.icon],
+            size: "1.5rem",
+            color: "gray"
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", {
+            id,
+            "bind:value": input2,
+            type: inputType.value,
+            class: styles$j.input,
+            placeholder: props.placeholder,
+            onFocus$: () => isFocused.value = true,
+            onBlur$: () => isFocused.value = false,
+            disabled: props.disabled || props.loading,
+            style: {
+              cursor: props.disabled ? "not-allowed" : props.loading ? "progress" : "auto"
+            },
+            "aria-required": props.required
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            class: styles$j["icon-box"],
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                class: styles$j.suffix,
+                children: props.suffix != null && /* @__PURE__ */ jsxRuntime.jsx(ElmInlineText, {
+                  text: props.suffix
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleVisibleSwitch,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+                  d: inputType.value === "text" ? js.mdiEyeOutline : js.mdiEyeOffOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleDelete,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ElmMdiIcon, {
+                  d: js.mdiBackspaceOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: styles$j.loading,
+        style: {
+          opacity: props.loading ? 0.2 : 0
+        }
+      })
+    ]
+  });
+});
 const LOCAL_STORAGE_KEY = "elmethis-theme";
 function useElmethisTheme() {
   const isDarkTheme = qwik.useSignal(false);
@@ -2639,5 +2786,6 @@ exports.ElmTableBody = ElmTableBody;
 exports.ElmTableCell = ElmTableCell;
 exports.ElmTableHeader = ElmTableHeader;
 exports.ElmTableRow = ElmTableRow;
+exports.ElmTextField = ElmTextField;
 exports.ElmToggle = ElmToggle;
 exports.ElmToggleTheme = ElmToggleTheme;

package/lib/index.qwik.mjs

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot, useSignal, useTask$, $, useComputed$, useOnDocument, useVisibleTask$, useContextProvider, createContextId, useContext, Fragment as Fragment$1 } from "@builder.io/qwik";
-import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMessageImageOutline, mdiFile, mdiDownload, mdiLinkVariant, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
+import { component$, Slot, useSignal, useTask$, $, useComputed$, useId, useOnDocument, useVisibleTask$, useContextProvider, createContextId, useContext, Fragment as Fragment$1 } from "@builder.io/qwik";
+import { mdiCodeTags, mdiClipboardCheckMultipleOutline, mdiClipboardMultipleOutline, mdiChevronRight, mdiPlus, mdiMagnify, mdiLinkVariant, mdiArchive, mdiTag, mdiEarth, mdiKey, mdiLock, mdiAccount, mdiEmail, mdiPen, mdiText, mdiEyeOutline, mdiEyeOffOutline, mdiBackspaceOutline, mdiMessageImageOutline, mdiFile, mdiDownload, mdiHome, mdiApplicationOutline, mdiFolderOpen, mdiFormatQuoteOpen, mdiFormatQuoteClose, mdiAlertOctagram, mdiAlert, mdiShieldAlert, mdiLightbulbOn, mdiInformation } from "@mdi/js";
 import { codeToHtml } from "shiki";
 import { renderToString } from "katex";
 import { kebabCase } from "lodash-es";
@@ -8,7 +8,7 @@ import { marked } from "marked";
 const caption$1 = "_caption_1j0ec_27";
 const divider = "_divider_1j0ec_50";
 const code$2 = "_code_1j0ec_1";
-const styles$t = {
+const styles$u = {
   "code-block": "_code-block_1j0ec_1",
   "language-icon": "_language-icon_1j0ec_22",
   caption: caption$1,
@@ -68,7 +68,7 @@ const Typescript = component$(({ size = 24, ...props }) => {
   });
 });
 const path = "_path_1ccs2_1";
-const styles$s = {
+const styles$t = {
   path
 };
 const Bash = component$(({ size = 24, ...props }) => {
@@ -84,7 +84,7 @@ const Bash = component$(({ size = 24, ...props }) => {
         d: "M4.24 4.24h119.53v119.53H4.24z"
       }),
       /* @__PURE__ */ jsx("path", {
-        class: styles$s.path,
+        class: styles$t.path,
         d: "M109.01 28.64L71.28 6.24c-2.25-1.33-4.77-2-7.28-2s-5.03.67-7.28 2.01l-37.74 22.4c-4.5 2.67-7.28 7.61-7.28 12.96v44.8c0 5.35 2.77 10.29 7.28 12.96l37.73 22.4c2.25 1.34 4.76 2 7.28 2c2.51 0 5.03-.67 7.28-2l37.74-22.4c4.5-2.67 7.28-7.62 7.28-12.96V41.6c0-5.34-2.77-10.29-7.28-12.96M79.79 98.59l.06 3.22c0 .39-.25.83-.55.99l-1.91 1.1c-.3.15-.56-.03-.56-.42l-.03-3.17c-1.63.68-3.29.84-4.34.42c-.2-.08-.29-.37-.21-.71l.69-2.91c.06-.23.18-.46.34-.6c.06-.06.12-.1.18-.13c.11-.06.22-.07.31-.03c1.14.38 2.59.2 3.99-.5c1.78-.9 2.97-2.72 2.95-4.52c-.02-1.64-.9-2.31-3.05-2.33c-2.74.01-5.3-.53-5.34-4.57c-.03-3.32 1.69-6.78 4.43-8.96l-.03-3.25c0-.4.24-.84.55-1l1.85-1.18c.3-.15.56.04.56.43l.03 3.25c1.36-.54 2.54-.69 3.61-.44c.23.06.34.38.24.75l-.72 2.88c-.06.22-.18.44-.33.58a.8.8 0 0 1-.19.14c-.1.05-.19.06-.28.05c-.49-.11-1.65-.36-3.48.56c-1.92.97-2.59 2.64-2.58 3.88c.02 1.48.77 1.93 3.39 1.97c3.49.06 4.99 1.58 5.03 5.09c.05 3.44-1.79 7.15-4.61 9.41m26.34-60.5l-35.7 22.05c-4.45 2.6-7.73 5.52-7.74 10.89v43.99c0 3.21 1.3 5.29 3.29 5.9c-.65.11-1.32.19-1.98.19c-2.09 0-4.15-.57-5.96-1.64l-37.73-22.4c-3.69-2.19-5.98-6.28-5.98-10.67V41.6c0-4.39 2.29-8.48 5.98-10.67l37.74-22.4c1.81-1.07 3.87-1.64 5.96-1.64s4.15.57 5.96 1.64l37.74 22.4c3.11 1.85 5.21 5.04 5.8 8.63c-1.27-2.67-4.09-3.39-7.38-1.47"
       }),
       /* @__PURE__ */ jsx("path", {
@@ -524,13 +524,13 @@ const C = component$(({ size = 24, ...props }) => {
     ]
   });
 });
-const icon$3 = "_icon_1gvln_1";
-const styles$r = {
-  icon: icon$3
+const icon$4 = "_icon_1gvln_1";
+const styles$s = {
+  icon: icon$4
 };
 const ElmMdiIcon = component$(({ d, size = "1em", color, lightColor, darkColor }) => {
   return /* @__PURE__ */ jsx("svg", {
-    class: styles$r.icon,
+    class: styles$s.icon,
     style: {
       "--color": lightColor ?? color,
       "--dark-color": darkColor ?? color
@@ -639,7 +639,7 @@ const text$3 = "_text_1gswr_1";
 const code$1 = "_code_1gswr_12";
 const kbd = "_kbd_1gswr_21";
 const link$1 = "_link_1gswr_47";
-const styles$q = {
+const styles$r = {
   text: text$3,
   code: code$1,
   kbd,
@@ -649,17 +649,17 @@ const text$2 = "_text_zryur_1";
 const textStyles = {
   text: text$2
 };
-const icon$2 = "_icon_19g82_1";
-const styles$p = {
-  icon: icon$2
+const icon$3 = "_icon_19g82_1";
+const styles$q = {
+  icon: icon$3
 };
 const ElmInlineIcon = component$(({ src, alt }) => {
   return /* @__PURE__ */ jsx("span", {
-    class: styles$p.icon,
+    class: styles$q.icon,
     children: /* @__PURE__ */ jsx("img", {
       src,
       alt,
-      class: styles$p.icon
+      class: styles$q.icon
     })
   });
 });
@@ -670,7 +670,7 @@ const ElmInlineText = component$((props) => {
   }) : /* @__PURE__ */ jsx(Slot, {});
   if (props.kbd) {
     vnode = /* @__PURE__ */ jsx("kbd", {
-      class: styles$q.kbd,
+      class: styles$r.kbd,
       children: vnode
     });
   }
@@ -696,13 +696,13 @@ const ElmInlineText = component$((props) => {
   }
   if (code2) {
     vnode = /* @__PURE__ */ jsx("code", {
-      class: styles$q.code,
+      class: styles$r.code,
       children: vnode
     });
   }
   if (props.ruby) {
     vnode = /* @__PURE__ */ jsxs("ruby", {
-      class: styles$q.text,
+      class: styles$r.text,
       children: [
         /* @__PURE__ */ jsx("span", {
           children: vnode
@@ -715,7 +715,7 @@ const ElmInlineText = component$((props) => {
   }
   const wrappedVnode = /* @__PURE__ */ jsx("span", {
     class: [
-      styles$q.text,
+      styles$r.text,
       textStyles.text
     ],
     style: {
@@ -727,7 +727,7 @@ const ElmInlineText = component$((props) => {
   });
   if (props.href) {
     return /* @__PURE__ */ jsxs("a", {
-      class: styles$q.link,
+      class: styles$r.link,
       href: props.href,
       style: {
         "--font-size": size
@@ -745,7 +745,7 @@ const ElmInlineText = component$((props) => {
   return wrappedVnode;
 });
 const code = "_code_1sw1e_1";
-const styles$o = {
+const styles$p = {
   code
 };
 const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
@@ -770,7 +770,7 @@ const ElmShikiHighlighter = component$(({ code: code2, language = "txt" }) => {
     }
   });
   return /* @__PURE__ */ jsx("pre", {
-    class: styles$o.code,
+    class: styles$p.code,
     dangerouslySetInnerHTML: rawHtml.value
   });
 });
@@ -789,19 +789,19 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
     }
   });
   return /* @__PURE__ */ jsxs("figure", {
-    class: styles$t["code-block"],
+    class: styles$u["code-block"],
     style: {
       margin
     },
     children: [
       /* @__PURE__ */ jsx("span", {
-        class: styles$t["language-icon"],
+        class: styles$u["language-icon"],
         children: /* @__PURE__ */ jsx(ElmLanguageIcon, {
           language
         })
       }),
       /* @__PURE__ */ jsx("span", {
-        class: styles$t.caption,
+        class: styles$u.caption,
         children: /* @__PURE__ */ jsxs(ElmInlineText, {
           children: [
             caption2 || language,
@@ -810,7 +810,7 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$t["copy-icon"],
+        class: styles$u["copy-icon"],
         onClick$: copyToClipboard,
         children: /* @__PURE__ */ jsx(ElmMdiIcon, {
           size: "1.25rem",
@@ -819,10 +819,10 @@ const ElmCodeBlock = component$(({ code: code2, language = "txt", caption: capti
         })
       }),
       /* @__PURE__ */ jsx("hr", {
-        class: styles$t.divider
+        class: styles$u.divider
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$t.code,
+        class: styles$u.code,
         children: /* @__PURE__ */ jsx(ElmShikiHighlighter, {
           code: code2,
           language
@@ -842,7 +842,7 @@ const ElmKatex = component$(({ expression, block = false }) => {
   });
 });
 const parallax = "_parallax_1kb0k_1";
-const styles$n = {
+const styles$o = {
   "parallax-watcher": "_parallax-watcher_1kb0k_1",
   parallax
 };
@@ -851,13 +851,13 @@ const ElmParallax = component$(({ images }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$n["parallax-watcher"],
+        class: styles$o["parallax-watcher"],
         "window:onScroll$": () => {
           y.value = window.scrollY;
         }
       }),
       images.map((image2, index) => /* @__PURE__ */ jsx("div", {
-        class: styles$n.parallax,
+        class: styles$o.parallax,
         style: {
           backgroundImage: `url(${image2})`,
           transform: `scale(1.2) translateY(${y.value / (1e3 * (index + 1))}%)`,
@@ -871,7 +871,7 @@ const toggle = "_toggle_1nxqa_1";
 const summary = "_summary_1nxqa_14";
 const content$2 = "_content_1nxqa_60";
 const footer = "_footer_1nxqa_80";
-const styles$m = {
+const styles$n = {
   toggle,
   "toggle-closed": "_toggle-closed_1nxqa_7",
   "toggle-open": "_toggle-open_1nxqa_10",
@@ -899,29 +899,29 @@ const ElmToggle = component$(({ summary: summary2 }) => {
   });
   return /* @__PURE__ */ jsxs("div", {
     class: [
-      styles$m.toggle,
+      styles$n.toggle,
       {
-        [styles$m["toggle-open"]]: isOpen.value,
-        [styles$m["toggle-closed"]]: !isOpen.value
+        [styles$n["toggle-open"]]: isOpen.value,
+        [styles$n["toggle-closed"]]: !isOpen.value
       }
     ],
     children: [
       /* @__PURE__ */ jsxs("div", {
         class: [
-          styles$m.summary,
+          styles$n.summary,
           {
-            [styles$m["summary-open"]]: isOpen.value,
-            [styles$m["summary-closed"]]: !isOpen.value
+            [styles$n["summary-open"]]: isOpen.value,
+            [styles$n["summary-closed"]]: !isOpen.value
           }
         ],
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$m["chevron-icon"],
+              styles$n["chevron-icon"],
               {
-                [styles$m["chevron-icon-open"]]: isOpen.value,
-                [styles$m["chevron-icon-closed"]]: !isOpen.value
+                [styles$n["chevron-icon-open"]]: isOpen.value,
+                [styles$n["chevron-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -929,17 +929,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             })
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$m["summary-text"],
+            class: styles$n["summary-text"],
             children: summary2 ? summary2 : /* @__PURE__ */ jsx(Slot, {
               name: "summary"
             })
           }),
           /* @__PURE__ */ jsx("span", {
             class: [
-              styles$m["plus-icon"],
+              styles$n["plus-icon"],
               {
-                [styles$m["plus-icon-open"]]: isOpen.value,
-                [styles$m["plus-icon-closed"]]: !isOpen.value
+                [styles$n["plus-icon-open"]]: isOpen.value,
+                [styles$n["plus-icon-closed"]]: !isOpen.value
               }
             ],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
@@ -952,30 +952,30 @@ const ElmToggle = component$(({ summary: summary2 }) => {
       }),
       /* @__PURE__ */ jsx("div", {
         class: [
-          styles$m.content,
+          styles$n.content,
           {
-            [styles$m["content-open"]]: isOpen.value,
-            [styles$m["content-closed"]]: !isOpen.value
+            [styles$n["content-open"]]: isOpen.value,
+            [styles$n["content-closed"]]: !isOpen.value
           }
         ],
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: styles$m.footer,
+        class: styles$n.footer,
         onClick$: toggle2,
         children: [
           /* @__PURE__ */ jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
@@ -985,17 +985,17 @@ const ElmToggle = component$(({ summary: summary2 }) => {
             children: "CLOSE"
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$m["footer-cross-icon"],
+            class: styles$n["footer-cross-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiPlus,
               color: "#c56565"
             })
           }),
           /* @__PURE__ */ jsx("hr", {
-            class: styles$m["footer-line"]
+            class: styles$n["footer-line"]
           }),
           /* @__PURE__ */ jsx("span", {
-            class: styles$m["footer-chevron-icon"],
+            class: styles$n["footer-chevron-icon"],
             children: /* @__PURE__ */ jsx(ElmMdiIcon, {
               d: mdiChevronRight,
               color: "gray"
@@ -1006,50 +1006,50 @@ const ElmToggle = component$(({ summary: summary2 }) => {
     ]
   });
 });
-const styles$l = {
+const styles$m = {
   "block-fallback": "_block-fallback_rt986_1"
 };
-const wrapper$1 = "_wrapper_1yktj_12";
+const wrapper$2 = "_wrapper_1yktj_12";
 const dot = "_dot_1yktj_22";
-const styles$k = {
-  wrapper: wrapper$1,
+const styles$l = {
+  wrapper: wrapper$2,
   dot
 };
 const ElmDotLoadingIcon = component$(({ size = "4em", color = "#606875" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$k.wrapper,
+    class: styles$l.wrapper,
     style: {
       "--size": size,
       "--color": color
     },
     children: [
       /* @__PURE__ */ jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       }),
       /* @__PURE__ */ jsx("div", {
-        class: styles$k.dot,
+        class: styles$l.dot,
         "aria-hidden": "true"
       })
     ]
   });
 });
-const styles$j = {
+const styles$k = {
   "rectangle-wave": "_rectangle-wave_hej9g_17"
 };
 const ElmRectangleWave = component$(() => {
   return /* @__PURE__ */ jsx("div", {
     "aria-hidden": "true",
-    class: styles$j["rectangle-wave"]
+    class: styles$k["rectangle-wave"]
   });
 });
 const ElmBlockFallback = component$(({ height = "16rem" }) => {
   return /* @__PURE__ */ jsxs("div", {
-    class: styles$l["block-fallback"],
+    class: styles$m["block-fallback"],
     style: {
       "--height": height
     },
@@ -1059,6 +1059,153 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
+const loading = "_loading_1yj0v_19";
+const wrapper$1 = "_wrapper_1yj0v_33";
+const active = "_active_1yj0v_55";
+const header$1 = "_header_1yj0v_59";
+const label = "_label_1yj0v_67";
+const requierd = "_requierd_1yj0v_82";
+const body$1 = "_body_1yj0v_88";
+const input = "_input_1yj0v_109";
+const icon$2 = "_icon_1yj0v_136";
+const suffix = "_suffix_1yj0v_153";
+const styles$j = {
+  loading,
+  wrapper: wrapper$1,
+  active,
+  header: header$1,
+  label,
+  requierd,
+  body: body$1,
+  input,
+  "icon-box": "_icon-box_1yj0v_136",
+  icon: icon$2,
+  suffix
+};
+const ElmTextField = component$((props) => {
+  const id = useId();
+  const isFocused = useSignal(false);
+  const inputType = useSignal(props.isPassword ? "password" : "text");
+  const internalValue = useSignal("");
+  const input2 = props.value ?? internalValue;
+  const handleDelete = $(() => {
+    if (!props.loading && !props.disabled) {
+      input2.value = "";
+    }
+  });
+  const handleVisibleSwitch = $(() => {
+    if (!props.loading && !props.disabled) {
+      inputType.value = inputType.value === "text" ? "password" : "text";
+    }
+  });
+  const iconMap = {
+    text: mdiText,
+    pen: mdiPen,
+    email: mdiEmail,
+    user: mdiAccount,
+    lock: mdiLock,
+    key: mdiKey,
+    earth: mdiEarth,
+    tag: mdiTag,
+    archive: mdiArchive,
+    link: mdiLinkVariant,
+    search: mdiMagnify
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    class: [
+      styles$j.wrapper,
+      isFocused.value && styles$j.active
+    ],
+    style: {
+      backgroundColor: props.disabled || props.loading ? "rgba(0,0,0,0.15)" : void 0,
+      "--highlight-color": isFocused.value ? "#bfa056" : void 0
+    },
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: styles$j.header,
+        children: [
+          /* @__PURE__ */ jsxs("label", {
+            for: id,
+            class: styles$j.label,
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                children: props.label
+              }),
+              props.required && /* @__PURE__ */ jsx("span", {
+                class: styles$j.requierd,
+                children: "*"
+              })
+            ]
+          }),
+          props.maxLength != null && /* @__PURE__ */ jsx(ElmInlineText, {
+            text: `${input2.value.length} / ${props.maxLength}`,
+            color: input2.value.length > props.maxLength ? "#c56565" : "gray",
+            size: "0.75rem"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: styles$j.body,
+        children: [
+          props.icon && /* @__PURE__ */ jsx(ElmMdiIcon, {
+            d: iconMap[props.icon],
+            size: "1.5rem",
+            color: "gray"
+          }),
+          /* @__PURE__ */ jsx("input", {
+            id,
+            "bind:value": input2,
+            type: inputType.value,
+            class: styles$j.input,
+            placeholder: props.placeholder,
+            onFocus$: () => isFocused.value = true,
+            onBlur$: () => isFocused.value = false,
+            disabled: props.disabled || props.loading,
+            style: {
+              cursor: props.disabled ? "not-allowed" : props.loading ? "progress" : "auto"
+            },
+            "aria-required": props.required
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: styles$j["icon-box"],
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                class: styles$j.suffix,
+                children: props.suffix != null && /* @__PURE__ */ jsx(ElmInlineText, {
+                  text: props.suffix
+                })
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleVisibleSwitch,
+                children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+                  d: inputType.value === "text" ? mdiEyeOutline : mdiEyeOffOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: styles$j.icon,
+                onClick$: handleDelete,
+                children: /* @__PURE__ */ jsx(ElmMdiIcon, {
+                  d: mdiBackspaceOutline,
+                  size: "1.75em",
+                  color: "gray"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        class: styles$j.loading,
+        style: {
+          opacity: props.loading ? 0.2 : 0
+        }
+      })
+    ]
+  });
+});
 const LOCAL_STORAGE_KEY = "elmethis-theme";
 function useElmethisTheme() {
   const isDarkTheme = useSignal(false);
@@ -2638,6 +2785,7 @@ export {
   ElmTableCell,
   ElmTableHeader,
   ElmTableRow,
+  ElmTextField,
   ElmToggle,
   ElmToggleTheme
 };

package/lib/style.css

@@ -434,6 +434,167 @@
 }
 [data-theme=dark] ._rectangle-wave_hej9g_17 {
   border-color: rgba(255, 255, 255, 0.7);
+}@keyframes _loading_1yj0v_19 {
+  0% {
+    transform-origin: 0%;
+    transform: scaleX(0);
+  }
+  40% {
+    transform-origin: 0%;
+    transform: scaleX(1);
+  }
+  60% {
+    transform-origin: 100%;
+    transform: scaleX(1);
+  }
+  100% {
+    transform-origin: 100%;
+    transform: scaleX(0);
+  }
+}
+._loading_1yj0v_19 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #6987b8;
+  transition: opacity 200ms;
+  pointer-events: none;
+  animation-name: _loading_1yj0v_19;
+  animation-iteration-count: infinite;
+  animation-duration: 1600ms;
+}
+
+._wrapper_1yj0v_33 {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: border-color 200ms, background-color 200ms;
+  border-style: solid;
+  border-width: 1px;
+  border-color: transparent;
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.15);
+}
+[data-theme=dark] ._wrapper_1yj0v_33 {
+  background-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.75);
+}
+
+._active_1yj0v_55 {
+  border-color: var(--highlight-color);
+}
+
+._header_1yj0v_59 {
+  box-sizing: border-box;
+  height: 0.75rem;
+  padding: 0 0.25rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+._label_1yj0v_67 {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 0.75rem;
+  vertical-align: top;
+  transition: color 200ms;
+  color: var(--highlight-color, rgba(0, 0, 0, 0.65));
+}
+[data-theme=dark] ._label_1yj0v_67 {
+  color: var(--highlight-color, rgba(255, 255, 255, 0.65));
+}
+
+._requierd_1yj0v_82 {
+  padding-inline: 0.25rem;
+  color: #c56565;
+  font-weight: bold;
+}
+
+._body_1yj0v_88 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 0.25rem;
+  padding-left: 0.25rem;
+}
+
+._left-icon_1yj0v_96 {
+  margin: auto 0.25rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.7;
+}
+[data-theme=dark] ._left-icon_1yj0v_96 {
+  filter: invert(1);
+}
+
+._input_1yj0v_109 {
+  all: unset;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.7);
+  caret-color: rgba(0, 0, 0, 0.7);
+}
+._input_1yj0v_109::placeholder {
+  opacity: 0.5;
+}
+[data-theme=dark] ._input_1yj0v_109::placeholder {
+  opacity: 0.7;
+}
+._input_1yj0v_109::selection {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_1yj0v_109 {
+  color: rgba(255, 255, 255, 0.7);
+  caret-color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_1yj0v_109::selection {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+._icon-box_1yj0v_136 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+._icon_1yj0v_136 {
+  box-sizing: border-box;
+  border-radius: 0.125em;
+  padding: 0.25rem;
+  transition: background-color 200ms;
+  cursor: pointer;
+}
+._icon_1yj0v_136:hover {
+  background-color: rgba(128, 128, 128, 0.2);
+}
+
+._suffix_1yj0v_153 {
+  opacity: 0.6;
+  padding: 0 0.5rem;
+  user-select: none;
+  transition: color 200ms;
+  color: rgba(0, 0, 0, 0.65);
+}
+[data-theme=dark] ._suffix_1yj0v_153 {
+  color: rgba(255, 255, 255, 0.65);
 }._icon_1husg_1 {
   display: block;
   box-sizing: border-box;

package/lib-types/components/form/elm-text-field.d.ts

@@ -0,0 +1,14 @@
+import { type Signal } from "@builder.io/qwik";
+export interface ElmTextFieldProps {
+    label: string;
+    maxLength?: number;
+    suffix?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    value?: Signal<string>;
+    icon?: "text" | "pen" | "email" | "user" | "lock" | "key" | "earth" | "tag" | "archive" | "link" | "search";
+    isPassword?: boolean;
+    required?: boolean;
+}
+export declare const ElmTextField: import("@builder.io/qwik").Component<ElmTextFieldProps>;

package/lib-types/components/form/elm-text-field.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { ElmTextField } from "./elm-text-field";
+declare const meta: Meta<typeof ElmTextField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const WithIcon: Story;
+export declare const Password: Story;
+export declare const MaxLength: Story;
+export declare const Loading: Story;

package/lib-types/index.d.ts

@@ -5,6 +5,7 @@ export { ElmParallax, type ElmParallaxProps, } from "./components/containments/e
 export { ElmToggle, type ElmToggleProps, } from "./components/containments/elm-toggle";
 export { ElmBlockFallback, type ElmBlockFallbackProps, } from "./components/fallback/elm-block-fallback";
 export { ElmRectangleWave, type ElmRectangleWaveProps, } from "./components/fallback/elm-rectangle-wave";
+export { ElmTextField, type ElmTextFieldProps, } from "./components/form/elm-text-field";
 export { ElmDotLoadingIcon, type ElmDotLoadingIconProps, } from "./components/icon/elm-dot-loading-icon";
 export { ElmInlineIcon, type ElmInlineIconProps, } from "./components/icon/elm-inline-icon";
 export { ElmLanguageIcon, type ElmLanguageIconProps, } from "./components/icon/elm-language-icon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "publishConfig": {
     "access": "public"
   },