@nr1e/qwik-ui 2.0.21 → 2.1.1

package/lib/components/button.qwik.cjs

@@ -2,26 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
+const qwikIcons = require("@nr1e/qwik-icons");
 const Button = qwik.component$((props) => {
+  const { icon, iconSize, iconClass, text, processing, disabled, type, onClick$, class: className, children, ...buttonProps } = props;
+  const isDisabled = processing || disabled;
+  const displayIcon = processing ? qwikIcons.SpinnersBarsFade : icon;
+  const displayIconClass = processing ? "animate-spin" : iconClass;
   return /* @__PURE__ */ jsxRuntime.jsxs("button", {
-    class: `btn props.disabled ? 'disabled' : ''} ${props.class ?? ""}`,
-    disabled: props.disabled,
-    id: props.id,
-    type: props.type ?? "button",
-    onClick$: !props.disabled && props.onClick$ ? props.onClick$ : void 0,
+    class: `btn ${isDisabled ? "disabled" : ""} ${className ?? ""}`,
+    disabled: isDisabled,
+    type: type ?? "button",
+    onClick$: !isDisabled && onClick$ ? onClick$ : void 0,
+    ...buttonProps,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-        children: props.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
-          class: props.iconClass,
-          children: /* @__PURE__ */ jsxRuntime.jsx(props.icon, {
-            size: props.iconSize ?? 18
+        children: displayIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+          class: displayIconClass,
+          children: /* @__PURE__ */ jsxRuntime.jsx("displayIcon", {
+            size: iconSize ?? 18
           })
         }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
-          class: props.iconClass,
+          class: displayIconClass,
           "q:slot": "icon"
         })
       }),
-      props.text ? props.text : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+      text ? text : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
     ]
   });
 });

package/lib/components/button.qwik.mjs

@@ -1,25 +1,30 @@
 import { jsxs, jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
 import { component$, Slot } from "@builder.io/qwik";
+import { SpinnersBarsFade } from "@nr1e/qwik-icons";
 const Button = component$((props) => {
+  const { icon, iconSize, iconClass, text, processing, disabled, type, onClick$, class: className, children, ...buttonProps } = props;
+  const isDisabled = processing || disabled;
+  const displayIcon = processing ? SpinnersBarsFade : icon;
+  const displayIconClass = processing ? "animate-spin" : iconClass;
   return /* @__PURE__ */ jsxs("button", {
-    class: `btn props.disabled ? 'disabled' : ''} ${props.class ?? ""}`,
-    disabled: props.disabled,
-    id: props.id,
-    type: props.type ?? "button",
-    onClick$: !props.disabled && props.onClick$ ? props.onClick$ : void 0,
+    class: `btn ${isDisabled ? "disabled" : ""} ${className ?? ""}`,
+    disabled: isDisabled,
+    type: type ?? "button",
+    onClick$: !isDisabled && onClick$ ? onClick$ : void 0,
+    ...buttonProps,
     children: [
       /* @__PURE__ */ jsx(Fragment, {
-        children: props.icon ? /* @__PURE__ */ jsx("span", {
-          class: props.iconClass,
-          children: /* @__PURE__ */ jsx(props.icon, {
-            size: props.iconSize ?? 18
+        children: displayIcon ? /* @__PURE__ */ jsx("span", {
+          class: displayIconClass,
+          children: /* @__PURE__ */ jsx("displayIcon", {
+            size: iconSize ?? 18
           })
         }) : /* @__PURE__ */ jsx("span", {
-          class: props.iconClass,
+          class: displayIconClass,
           "q:slot": "icon"
         })
       }),
-      props.text ? props.text : /* @__PURE__ */ jsx(Slot, {})
+      text ? text : /* @__PURE__ */ jsx(Slot, {})
     ]
   });
 });

package/lib/components/checkbox-field.qwik.cjs

@@ -3,50 +3,26 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const CheckboxField = qwik.component$((props) => {
-  const checked = qwik.useSignal(typeof props.checked === "boolean" ? props.checked : props.checked?.value ?? false);
-  qwik.useTask$(({ track }) => {
-    if (props.checked && typeof props.checked !== "boolean") {
-      track(() => checked.value);
-      if (checked.value !== props.checked?.value) {
-        props.checked.value = checked.value;
-      }
-    }
-  });
-  qwik.useTask$(({ track }) => {
-    if (props.checked && typeof props.checked !== "boolean") {
-      track(() => props.checked.value);
-      if (props.checked && checked.value !== props.checked.value) {
-        checked.value = props.checked.value;
-      }
-    }
-  });
+  const { label, error, id, class: className, ...inputProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
     children: [
       /* @__PURE__ */ jsxRuntime.jsxs("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("input", {
             type: "checkbox",
-            ...props.name && {
-              name: props.name
-            },
-            ...props.id && {
-              id: props.id
-            },
-            checked: checked.value,
-            class: `checkbox ${props.error ? "checkbox-error" : ""}`,
-            onClick$: props.onClick$
+            id,
+            class: `checkbox ${error ? "checkbox-error" : ""} ${className ?? ""}`,
+            ...inputProps
           }),
-          props.label
+          label
         ]
       }),
-      props.error && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/checkbox-field.qwik.mjs

@@ -1,50 +1,26 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, useSignal, useTask$ } from "@builder.io/qwik";
+import { component$ } from "@builder.io/qwik";
 const CheckboxField = component$((props) => {
-  const checked = useSignal(typeof props.checked === "boolean" ? props.checked : props.checked?.value ?? false);
-  useTask$(({ track }) => {
-    if (props.checked && typeof props.checked !== "boolean") {
-      track(() => checked.value);
-      if (checked.value !== props.checked?.value) {
-        props.checked.value = checked.value;
-      }
-    }
-  });
-  useTask$(({ track }) => {
-    if (props.checked && typeof props.checked !== "boolean") {
-      track(() => props.checked.value);
-      if (props.checked && checked.value !== props.checked.value) {
-        checked.value = props.checked.value;
-      }
-    }
-  });
+  const { label, error, id, class: className, ...inputProps } = props;
   return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
     children: [
       /* @__PURE__ */ jsxs("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: [
           /* @__PURE__ */ jsx("input", {
             type: "checkbox",
-            ...props.name && {
-              name: props.name
-            },
-            ...props.id && {
-              id: props.id
-            },
-            checked: checked.value,
-            class: `checkbox ${props.error ? "checkbox-error" : ""}`,
-            onClick$: props.onClick$
+            id,
+            class: `checkbox ${error ? "checkbox-error" : ""} ${className ?? ""}`,
+            ...inputProps
           }),
-          props.label
+          label
         ]
       }),
-      props.error && /* @__PURE__ */ jsx("div", {
+      error && /* @__PURE__ */ jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/dialog.qwik.cjs

@@ -26,6 +26,9 @@ const Dialog = qwik.component$((props) => {
         await props.onOpen$(dialog.value);
       }
       internalOpen.value = true;
+      if (dialog.value) {
+        dialog.value.scrollTop = 0;
+      }
       if (props.onPostOpen$ && dialog.value) {
         await props.onPostOpen$(dialog.value);
       }

package/lib/components/dialog.qwik.mjs

@@ -24,6 +24,9 @@ const Dialog = component$((props) => {
         await props.onOpen$(dialog.value);
       }
       internalOpen.value = true;
+      if (dialog.value) {
+        dialog.value.scrollTop = 0;
+      }
       if (props.onPostOpen$ && dialog.value) {
         await props.onPostOpen$(dialog.value);
       }

package/lib/components/refresh-button.qwik.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const qwikIcons = require("@nr1e/qwik-icons");
-const processingButton = require("./processing-button.qwik.cjs");
+const button = require("./button.qwik.cjs");
 const RefreshButton = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(processingButton.ProcessingButton, {
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
     ...props,
     class: `btn-primary ${props.class ?? ""}`,
     text: props.text || "Refresh",

package/lib/components/refresh-button.qwik.mjs

@@ -1,9 +1,9 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$ } from "@builder.io/qwik";
 import { MdiRefresh } from "@nr1e/qwik-icons";
-import { ProcessingButton } from "./processing-button.qwik.mjs";
+import { Button } from "./button.qwik.mjs";
 const RefreshButton = component$((props) => {
-  return /* @__PURE__ */ jsx(ProcessingButton, {
+  return /* @__PURE__ */ jsx(Button, {
     ...props,
     class: `btn-primary ${props.class ?? ""}`,
     text: props.text || "Refresh",

package/lib/components/select-field.qwik.cjs

@@ -3,54 +3,27 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const SelectField = qwik.component$((props) => {
-  const value = qwik.useSignal(typeof props.value === "string" ? props.value : props.value?.value);
-  qwik.useTask$(({ track }) => {
-    if (props.value && typeof props.value !== "string") {
-      track(() => value.value);
-      if (value.value !== props.value?.value) {
-        props.value.value = value.value;
-      }
-    }
-  });
-  qwik.useTask$(({ track }) => {
-    if (props.value && typeof props.value !== "string") {
-      track(() => props.value.value);
-      if (props.value.value !== value.value) {
-        value.value = props.value.value;
-      }
-    }
-  });
+  const { label, error, id, class: className, ...selectProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
     children: [
-      props.label && /* @__PURE__ */ jsxRuntime.jsx("label", {
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           class: "label-text",
-          children: props.label
+          children: label
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsx("select", {
-        ...props.name && {
-          name: props.name
-        },
-        ...props.id && {
-          id: props.id
-        },
-        required: props.required,
-        "aria-required": props.required,
-        disabled: props.disabled,
-        class: `select ${props.error ? "select-error" : ""}`,
-        onChange$: props.onChange$,
-        onBlur$: props.onBlur$,
+        id,
+        class: `select ${error ? "select-error" : ""} ${className ?? ""}`,
+        ...selectProps,
         children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
       }),
-      props.error && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/select-field.qwik.mjs

@@ -1,54 +1,27 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, useSignal, useTask$, Slot } from "@builder.io/qwik";
+import { component$, Slot } from "@builder.io/qwik";
 const SelectField = component$((props) => {
-  const value = useSignal(typeof props.value === "string" ? props.value : props.value?.value);
-  useTask$(({ track }) => {
-    if (props.value && typeof props.value !== "string") {
-      track(() => value.value);
-      if (value.value !== props.value?.value) {
-        props.value.value = value.value;
-      }
-    }
-  });
-  useTask$(({ track }) => {
-    if (props.value && typeof props.value !== "string") {
-      track(() => props.value.value);
-      if (props.value.value !== value.value) {
-        value.value = props.value.value;
-      }
-    }
-  });
+  const { label, error, id, class: className, ...selectProps } = props;
   return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
     children: [
-      props.label && /* @__PURE__ */ jsx("label", {
+      label && /* @__PURE__ */ jsx("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: /* @__PURE__ */ jsx("span", {
           class: "label-text",
-          children: props.label
+          children: label
         })
       }),
       /* @__PURE__ */ jsx("select", {
-        ...props.name && {
-          name: props.name
-        },
-        ...props.id && {
-          id: props.id
-        },
-        required: props.required,
-        "aria-required": props.required,
-        disabled: props.disabled,
-        class: `select ${props.error ? "select-error" : ""}`,
-        onChange$: props.onChange$,
-        onBlur$: props.onBlur$,
+        id,
+        class: `select ${error ? "select-error" : ""} ${className ?? ""}`,
+        ...selectProps,
         children: /* @__PURE__ */ jsx(Slot, {})
       }),
-      props.error && /* @__PURE__ */ jsx("div", {
+      error && /* @__PURE__ */ jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/submit-button.qwik.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
-const processingButton = require("./processing-button.qwik.cjs");
+const button = require("./button.qwik.cjs");
 const SubmitButton = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(processingButton.ProcessingButton, {
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
     ...props,
     class: `btn-primary ${props.class ?? ""}`,
     text: props.text || "Submit",

package/lib/components/submit-button.qwik.mjs

@@ -1,8 +1,8 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$ } from "@builder.io/qwik";
-import { ProcessingButton } from "./processing-button.qwik.mjs";
+import { Button } from "./button.qwik.mjs";
 const SubmitButton = component$((props) => {
-  return /* @__PURE__ */ jsx(ProcessingButton, {
+  return /* @__PURE__ */ jsx(Button, {
     ...props,
     class: `btn-primary ${props.class ?? ""}`,
     text: props.text || "Submit",

package/lib/components/text-field.qwik.cjs

@@ -3,64 +3,41 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const qwik = require("@builder.io/qwik");
 const TextField = qwik.component$((props) => {
-  const value = props.value;
-  const onInputHandler = props.onInput$;
+  const { label, error, icon, id, class: className, children, ...inputProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
     children: [
-      props.label && /* @__PURE__ */ jsxRuntime.jsx("label", {
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: /* @__PURE__ */ jsxRuntime.jsx("span", {
           class: "label-text",
-          children: props.label
+          children: label
         })
       }),
       /* @__PURE__ */ jsxRuntime.jsxs("label", {
-        class: `input w-full ${props.error ? "input-error" : ""}`,
+        class: `input w-full ${error ? "input-error" : ""} ${className ?? ""}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "left"
           }),
-          props.icon && /* @__PURE__ */ jsxRuntime.jsx(props.icon, {
+          icon && /* @__PURE__ */ jsxRuntime.jsx("icon", {
             size: 18,
             class: "opacity-50"
           }),
           /* @__PURE__ */ jsxRuntime.jsx("input", {
-            type: props.type || "text",
-            ...props.id && {
-              id: props.id
-            },
-            ...props.name && {
-              name: props.name
-            },
-            required: props.required,
-            "aria-required": props.required,
-            disabled: props.disabled,
-            maxLength: props.maxLength,
-            value: typeof props.value === "string" ? props.value : props.value?.value,
+            id,
             class: "placeholder:opacity-50",
-            placeholder: props.placeholder,
-            onBlur$: props.onBlur$,
-            onInput$: (event, element) => {
-              if (value && typeof value !== "string") {
-                value.value = element.value;
-              }
-              if (onInputHandler) {
-                onInputHandler(event, element);
-              }
-            }
+            ...inputProps
           }),
           /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "right"
           })
         ]
       }),
-      props.error && /* @__PURE__ */ jsxRuntime.jsx("div", {
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/text-field.qwik.mjs

@@ -1,64 +1,41 @@
 import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
 import { component$, Slot } from "@builder.io/qwik";
 const TextField = component$((props) => {
-  const value = props.value;
-  const onInputHandler = props.onInput$;
+  const { label, error, icon, id, class: className, children, ...inputProps } = props;
   return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
     children: [
-      props.label && /* @__PURE__ */ jsx("label", {
+      label && /* @__PURE__ */ jsx("label", {
         class: "label",
-        ...props.id && {
-          for: props.id
-        },
+        for: id,
         children: /* @__PURE__ */ jsx("span", {
           class: "label-text",
-          children: props.label
+          children: label
         })
       }),
       /* @__PURE__ */ jsxs("label", {
-        class: `input w-full ${props.error ? "input-error" : ""}`,
+        class: `input w-full ${error ? "input-error" : ""} ${className ?? ""}`,
         children: [
           /* @__PURE__ */ jsx(Slot, {
             name: "left"
           }),
-          props.icon && /* @__PURE__ */ jsx(props.icon, {
+          icon && /* @__PURE__ */ jsx("icon", {
             size: 18,
             class: "opacity-50"
           }),
           /* @__PURE__ */ jsx("input", {
-            type: props.type || "text",
-            ...props.id && {
-              id: props.id
-            },
-            ...props.name && {
-              name: props.name
-            },
-            required: props.required,
-            "aria-required": props.required,
-            disabled: props.disabled,
-            maxLength: props.maxLength,
-            value: typeof props.value === "string" ? props.value : props.value?.value,
+            id,
             class: "placeholder:opacity-50",
-            placeholder: props.placeholder,
-            onBlur$: props.onBlur$,
-            onInput$: (event, element) => {
-              if (value && typeof value !== "string") {
-                value.value = element.value;
-              }
-              if (onInputHandler) {
-                onInputHandler(event, element);
-              }
-            }
+            ...inputProps
           }),
           /* @__PURE__ */ jsx(Slot, {
             name: "right"
           })
         ]
       }),
-      props.error && /* @__PURE__ */ jsx("div", {
+      error && /* @__PURE__ */ jsx("div", {
         class: "text-error mt-1 text-xs",
-        children: props.error
+        children: error
       })
     ]
   });

package/lib/components/textarea-field.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 TextareaField = qwik.component$((props) => {
+  const { label, error, id, class: className, ...textareaProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    class: "fieldset",
+    children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", {
+        class: "label",
+        for: id,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          class: "label-text",
+          children: label
+        })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("textarea", {
+        id,
+        class: `textarea ${error ? "textarea-error" : ""} ${className ?? ""}`,
+        ...textareaProps
+      }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error
+      })
+    ]
+  });
+});
+exports.TextareaField = TextareaField;

package/lib/components/textarea-field.qwik.mjs

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+const TextareaField = component$((props) => {
+  const { label, error, id, class: className, ...textareaProps } = props;
+  return /* @__PURE__ */ jsxs("div", {
+    class: "fieldset",
+    children: [
+      label && /* @__PURE__ */ jsx("label", {
+        class: "label",
+        for: id,
+        children: /* @__PURE__ */ jsx("span", {
+          class: "label-text",
+          children: label
+        })
+      }),
+      /* @__PURE__ */ jsx("textarea", {
+        id,
+        class: `textarea ${error ? "textarea-error" : ""} ${className ?? ""}`,
+        ...textareaProps
+      }),
+      error && /* @__PURE__ */ jsx("div", {
+        class: "text-error mt-1 text-xs",
+        children: error
+      })
+    ]
+  });
+});
+export {
+  TextareaField
+};

package/lib/index.qwik.cjs

@@ -21,11 +21,11 @@ const gtm = require("./components/gtm.qwik.cjs");
 const menu = require("./components/menu.qwik.cjs");
 const microsoftSignInButton = require("./components/microsoft-sign-in-button.qwik.cjs");
 const paceBar = require("./components/pace-bar.qwik.cjs");
-const processingButton = require("./components/processing-button.qwik.cjs");
 const refreshButton = require("./components/refresh-button.qwik.cjs");
 const selectField = require("./components/select-field.qwik.cjs");
 const submitButton = require("./components/submit-button.qwik.cjs");
 const textField = require("./components/text-field.qwik.cjs");
+const textareaField = require("./components/textarea-field.qwik.cjs");
 const themeSelector = require("./components/theme-selector.qwik.cjs");
 const timeZoneSelector = require("./components/time-zone-selector.qwik.cjs");
 const universalLayout = require("./components/universal-layout.qwik.cjs");
@@ -64,11 +64,11 @@ exports.MenuLink = menu.MenuLink;
 exports.Submenu = menu.Submenu;
 exports.MicrosoftSignInButton = microsoftSignInButton.MicrosoftSignInButton;
 exports.PaceBar = paceBar.PaceBar;
-exports.ProcessingButton = processingButton.ProcessingButton;
 exports.RefreshButton = refreshButton.RefreshButton;
 exports.SelectField = selectField.SelectField;
 exports.SubmitButton = submitButton.SubmitButton;
 exports.TextField = textField.TextField;
+exports.TextareaField = textareaField.TextareaField;
 exports.THEMES = themeSelector.THEMES;
 exports.ThemeSelector = themeSelector.ThemeSelector;
 exports.themeToName = themeSelector.themeToName;

package/lib/index.qwik.mjs

@@ -19,11 +19,11 @@ import { GtmBody, GtmHead } from "./components/gtm.qwik.mjs";
 import { Menu, MenuButton, MenuDivider, MenuGroup, MenuGroupSummary, MenuLink, Submenu } from "./components/menu.qwik.mjs";
 import { MicrosoftSignInButton } from "./components/microsoft-sign-in-button.qwik.mjs";
 import { PaceBar } from "./components/pace-bar.qwik.mjs";
-import { ProcessingButton } from "./components/processing-button.qwik.mjs";
 import { RefreshButton } from "./components/refresh-button.qwik.mjs";
 import { SelectField } from "./components/select-field.qwik.mjs";
 import { SubmitButton } from "./components/submit-button.qwik.mjs";
 import { TextField } from "./components/text-field.qwik.mjs";
+import { TextareaField } from "./components/textarea-field.qwik.mjs";
 import { THEMES, ThemeSelector, themeToName } from "./components/theme-selector.qwik.mjs";
 import { TimeZoneSelector, timeZoneToName } from "./components/time-zone-selector.qwik.mjs";
 import { UniversalLayout } from "./components/universal-layout.qwik.mjs";
@@ -62,13 +62,13 @@ export {
   MenuLink,
   MicrosoftSignInButton,
   PaceBar,
-  ProcessingButton,
   RefreshButton,
   SelectField,
   Submenu,
   SubmitButton,
   THEMES,
   TextField,
+  TextareaField,
   ThemeSelector,
   TimeZoneSelector,
   UniversalLayout,

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

@@ -1,25 +1,6 @@
-import { Component, QRL } from '@builder.io/qwik';
-import { IconProps } from '@nr1e/qwik-icons';
-/**
- * Props for the Button component.
- */
-export interface ButtonProps {
-    /**
-     * ID of the button.
-     */
-    id?: string;
-    /**
-     * CSS class to apply to the button.
-     */
-    class?: string;
-    /**
-     * Callback function to be called when the button is clicked.
-     */
-    onClick$?: QRL<(event: Event) => void | Promise<void>>;
-    /**
-     * Whether the button is disabled.
-     */
-    disabled?: boolean;
+import { type Component, type JSXChildren, type PropsOf } from '@builder.io/qwik';
+import type { IconProps } from '@nr1e/qwik-icons';
+export interface ButtonProps extends Omit<PropsOf<'button'>, 'children'> {
     /**
      * Icon component to display next to the button text. You can alternatively use the `icon` slot.
      */
@@ -32,14 +13,15 @@ export interface ButtonProps {
      * CSS class to apply to the icon.
      */
     iconClass?: string;
-    /**
-     * Type of the button. Default is 'button'.
-     */
-    type?: 'button' | 'submit' | 'reset';
     /**
      * Text to display on the button. Alternative to the `default` slot.
      */
     text?: string;
+    /**
+     * Whether the button is processing. This will replace the icon with a rotating spinner when true.
+     */
+    processing?: boolean;
+    children?: JSXChildren;
 }
 /**
  * Button component.

package/lib-types/components/checkbox-field.d.ts

@@ -1,10 +1,6 @@
-import { QRL, Signal } from '@builder.io/qwik';
-export interface CheckboxFieldProps {
-    id?: string;
+import type { PropsOf } from '@builder.io/qwik';
+export interface CheckboxFieldProps extends PropsOf<'input'> {
     label: string;
-    name?: string;
-    checked?: boolean | Signal<boolean>;
     error?: string;
-    onClick$?: QRL<(event: Event) => void>;
 }
 export declare const CheckboxField: import("@builder.io/qwik").Component<CheckboxFieldProps>;

package/lib-types/components/select-field.d.ts

@@ -1,13 +1,6 @@
-import { QRL, Signal } from '@builder.io/qwik';
-export interface SelectFieldProps {
-    id?: string;
+import type { PropsOf } from '@builder.io/qwik';
+export interface SelectFieldProps extends Omit<PropsOf<'select'>, 'children'> {
     label?: string;
-    name?: string;
-    value?: string | null | Signal<string | null | undefined>;
     error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    onChange$?: QRL<(event: Event, element: HTMLSelectElement) => void>;
-    onBlur$?: QRL<(event: FocusEvent, element: HTMLSelectElement) => void>;
 }
 export declare const SelectField: import("@builder.io/qwik").Component<SelectFieldProps>;

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

@@ -1,35 +1,10 @@
-import { QRL, Signal, Component } from '@builder.io/qwik';
-import { IconProps } from '@nr1e/qwik-icons';
-/**
- * The type of the input field.
- */
-export type TextFieldType = 'text' | 'date' | 'email' | 'number' | 'tel' | 'url' | 'password';
-/**
- * Properties for the TextField component.
- */
-export interface TextFieldProps {
-    id?: string;
-    type?: TextFieldType;
+import { type Component, type JSXChildren } from '@builder.io/qwik';
+import type { PropsOf } from '@builder.io/qwik';
+import type { IconProps } from '@nr1e/qwik-icons';
+export interface TextFieldProps extends Omit<PropsOf<'input'>, 'children'> {
     label?: string;
-    name?: string;
-    value?: string | null | Signal<string | null | undefined>;
-    placeholder?: string;
     error?: string;
-    maxLength?: number;
-    required?: boolean;
-    disabled?: boolean;
-    /**
-     * Called when the input loses focus.
-     */
-    onBlur$?: QRL<(event: FocusEvent, element: HTMLInputElement) => void>;
-    /**
-     * Called when the input value changes.
-     */
-    onInput$?: QRL<(event: InputEvent, element: HTMLInputElement) => void>;
     icon?: Component<IconProps>;
+    children?: JSXChildren;
 }
-/**
- * A standardized text input field meant to be used independently or with Qwik
- * Modular Forms.
- */
 export declare const TextField: Component<TextFieldProps>;

package/lib-types/components/textarea-field.d.ts

@@ -0,0 +1,6 @@
+import type { PropsOf } from '@builder.io/qwik';
+export interface TextareaFieldProps extends PropsOf<'textarea'> {
+    label?: string;
+    error?: string;
+}
+export declare const TextareaField: import("@builder.io/qwik").Component<TextareaFieldProps>;

package/lib-types/index.d.ts

@@ -19,11 +19,11 @@ export * from './components/gtm';
 export * from './components/menu';
 export * from './components/microsoft-sign-in-button';
 export * from './components/pace-bar';
-export * from './components/processing-button';
 export * from './components/refresh-button';
 export * from './components/select-field';
 export * from './components/submit-button';
 export * from './components/text-field';
+export * from './components/textarea-field';
 export * from './components/theme-selector';
 export * from './components/time-zone-selector';
 export * from './components/universal-layout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "2.0.21",
+  "version": "2.1.1",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {

package/lib/components/processing-button.qwik.cjs

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
-const qwik = require("@builder.io/qwik");
-const qwikIcons = require("@nr1e/qwik-icons");
-const button = require("./button.qwik.cjs");
-const ProcessingButton = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
-    ...props,
-    class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
-    disabled: props.processing || props.disabled,
-    icon: props.processing ? qwikIcons.SpinnersBarsFade : props.icon,
-    iconClass: props.processing ? "animate-spin" : props.iconClass,
-    children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
-  });
-});
-exports.ProcessingButton = ProcessingButton;

package/lib/components/processing-button.qwik.mjs

@@ -1,17 +0,0 @@
-import { jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot } from "@builder.io/qwik";
-import { SpinnersBarsFade } from "@nr1e/qwik-icons";
-import { Button } from "./button.qwik.mjs";
-const ProcessingButton = component$((props) => {
-  return /* @__PURE__ */ jsx(Button, {
-    ...props,
-    class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
-    disabled: props.processing || props.disabled,
-    icon: props.processing ? SpinnersBarsFade : props.icon,
-    iconClass: props.processing ? "animate-spin" : props.iconClass,
-    children: /* @__PURE__ */ jsx(Slot, {})
-  });
-});
-export {
-  ProcessingButton
-};

package/lib-types/components/processing-button.d.ts

@@ -1,15 +0,0 @@
-import { ButtonProps } from './button';
-/**
- * Props for the ProcessingButton component. This class will replace the icon
- * with a rotating spinner when clicked.
- */
-export interface ProcessingButtonProps extends ButtonProps {
-    /**
-     * Whether the button is processing.
-     */
-    processing?: boolean;
-}
-/**
- * ProcessingButton component.
- */
-export declare const ProcessingButton: import("@builder.io/qwik").Component<ProcessingButtonProps>;