@nr1e/qwik-ui 2.0.16 → 2.0.18

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

@@ -3,17 +3,13 @@ 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 AddButton = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
-    class: `btn ${props.class ?? ""}`,
-    onClick$: props.onClick$,
-    id: props.id,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.MdiAddCircleOutline, {
-        size: 18
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
-    ]
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    icon: qwikIcons.MdiAddCircleOutline,
+    text: props.text || "Add"
   });
 });
 exports.AddButton = AddButton;

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

@@ -1,17 +1,13 @@
-import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot } from "@builder.io/qwik";
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
 import { MdiAddCircleOutline } from "@nr1e/qwik-icons";
+import { Button } from "./button.qwik.mjs";
 const AddButton = component$((props) => {
-  return /* @__PURE__ */ jsxs("button", {
-    class: `btn ${props.class ?? ""}`,
-    onClick$: props.onClick$,
-    id: props.id,
-    children: [
-      /* @__PURE__ */ jsx(MdiAddCircleOutline, {
-        size: 18
-      }),
-      /* @__PURE__ */ jsx(Slot, {})
-    ]
+  return /* @__PURE__ */ jsx(Button, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    icon: MdiAddCircleOutline,
+    text: props.text || "Add"
   });
 });
 export {

package/lib/components/button.qwik.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const Button = qwik.component$((props) => {
+  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,
+    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
+          })
+        }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
+          class: props.iconClass,
+          "q:slot": "icon"
+        })
+      }),
+      props.text ? props.text : /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+    ]
+  });
+});
+exports.Button = Button;

package/lib/components/button.qwik.mjs

@@ -0,0 +1,28 @@
+import { jsxs, jsx, Fragment } from "@builder.io/qwik/jsx-runtime";
+import { component$, Slot } from "@builder.io/qwik";
+const Button = component$((props) => {
+  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,
+    children: [
+      /* @__PURE__ */ jsx(Fragment, {
+        children: props.icon ? /* @__PURE__ */ jsx("span", {
+          class: props.iconClass,
+          children: /* @__PURE__ */ jsx(props.icon, {
+            size: props.iconSize ?? 18
+          })
+        }) : /* @__PURE__ */ jsx("span", {
+          class: props.iconClass,
+          "q:slot": "icon"
+        })
+      }),
+      props.text ? props.text : /* @__PURE__ */ jsx(Slot, {})
+    ]
+  });
+});
+export {
+  Button
+};

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
+const qwik = require("@builder.io/qwik");
+const button = require("./button.qwik.cjs");
+const CancelButton = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+    ...props,
+    text: props.text || "Cancel"
+  });
+});
+exports.CancelButton = CancelButton;

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

@@ -0,0 +1,12 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import { Button } from "./button.qwik.mjs";
+const CancelButton = component$((props) => {
+  return /* @__PURE__ */ jsx(Button, {
+    ...props,
+    text: props.text || "Cancel"
+  });
+});
+export {
+  CancelButton
+};

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

@@ -0,0 +1,42 @@
+"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) => {
+  const externalProcessing = qwik.isSignal(props.processing) ? props.processing : void 0;
+  const internalProcessing = qwik.useSignal(qwik.isSignal(props.processing) ? props.processing.value : props.processing ?? false);
+  const onClick$ = props.onClick$;
+  qwik.useTask$(({ track }) => {
+    if (externalProcessing) {
+      track(() => externalProcessing.value);
+      if (externalProcessing.value !== internalProcessing.value) {
+        internalProcessing.value = externalProcessing.value;
+      }
+    }
+  });
+  qwik.useTask$(({ track }) => {
+    if (externalProcessing) {
+      track(() => internalProcessing.value);
+      if (externalProcessing.value !== internalProcessing.value) {
+        externalProcessing.value = internalProcessing.value;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(button.Button, {
+    ...props,
+    class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
+    disabled: internalProcessing.value || props.disabled,
+    onClick$: (e) => {
+      internalProcessing.value = true;
+      if (onClick$) {
+        onClick$(e);
+      }
+    },
+    icon: internalProcessing.value ? qwikIcons.SpinnersBarsFade : props.icon,
+    iconClass: internalProcessing.value ? "animate-spin" : props.iconClass,
+    children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
+  });
+});
+exports.ProcessingButton = ProcessingButton;

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

@@ -0,0 +1,42 @@
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$, isSignal, useSignal, useTask$, Slot } from "@builder.io/qwik";
+import { SpinnersBarsFade } from "@nr1e/qwik-icons";
+import { Button } from "./button.qwik.mjs";
+const ProcessingButton = component$((props) => {
+  const externalProcessing = isSignal(props.processing) ? props.processing : void 0;
+  const internalProcessing = useSignal(isSignal(props.processing) ? props.processing.value : props.processing ?? false);
+  const onClick$ = props.onClick$;
+  useTask$(({ track }) => {
+    if (externalProcessing) {
+      track(() => externalProcessing.value);
+      if (externalProcessing.value !== internalProcessing.value) {
+        internalProcessing.value = externalProcessing.value;
+      }
+    }
+  });
+  useTask$(({ track }) => {
+    if (externalProcessing) {
+      track(() => internalProcessing.value);
+      if (externalProcessing.value !== internalProcessing.value) {
+        externalProcessing.value = internalProcessing.value;
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(Button, {
+    ...props,
+    class: `${props.processing || props.disabled ? "disabled" : ""} ${props.class ?? ""}`,
+    disabled: internalProcessing.value || props.disabled,
+    onClick$: (e) => {
+      internalProcessing.value = true;
+      if (onClick$) {
+        onClick$(e);
+      }
+    },
+    icon: internalProcessing.value ? SpinnersBarsFade : props.icon,
+    iconClass: internalProcessing.value ? "animate-spin" : props.iconClass,
+    children: /* @__PURE__ */ jsx(Slot, {})
+  });
+});
+export {
+  ProcessingButton
+};

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

@@ -0,0 +1,16 @@
+"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 processingButton = require("./processing-button.qwik.cjs");
+const RefreshButton = qwik.component$((props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(processingButton.ProcessingButton, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    text: props.text || "Refresh",
+    icon: qwikIcons.MdiRefresh,
+    processing: props.refreshing
+  });
+});
+exports.RefreshButton = RefreshButton;

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

@@ -0,0 +1,16 @@
+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";
+const RefreshButton = component$((props) => {
+  return /* @__PURE__ */ jsx(ProcessingButton, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    text: props.text || "Refresh",
+    icon: MdiRefresh,
+    processing: props.refreshing
+  });
+});
+export {
+  RefreshButton
+};

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

@@ -2,26 +2,13 @@
 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 SubmitButton = qwik.component$((props) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("button", {
-    class: `btn btn-primary ${props.submitting || props.disabled ? "disabled" : ""} `,
-    onClick$: props.onClick$,
-    id: props.id,
-    type: "submit",
-    disabled: props.submitting || props.disabled,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        "q:slot": "icon"
-      }),
-      props.submitting && /* @__PURE__ */ jsxRuntime.jsx("span", {
-        class: "animate-spin",
-        children: /* @__PURE__ */ jsxRuntime.jsx(qwikIcons.SpinnersBarsRotateFade, {
-          size: 18
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {})
-    ]
+  return /* @__PURE__ */ jsxRuntime.jsx(processingButton.ProcessingButton, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    text: props.text || "Submit",
+    processing: props.submitting
   });
 });
 exports.SubmitButton = SubmitButton;

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

@@ -1,25 +1,12 @@
-import { jsxs, jsx } from "@builder.io/qwik/jsx-runtime";
-import { component$, Slot } from "@builder.io/qwik";
-import { SpinnersBarsRotateFade } from "@nr1e/qwik-icons";
+import { jsx } from "@builder.io/qwik/jsx-runtime";
+import { component$ } from "@builder.io/qwik";
+import { ProcessingButton } from "./processing-button.qwik.mjs";
 const SubmitButton = component$((props) => {
-  return /* @__PURE__ */ jsxs("button", {
-    class: `btn btn-primary ${props.submitting || props.disabled ? "disabled" : ""} `,
-    onClick$: props.onClick$,
-    id: props.id,
-    type: "submit",
-    disabled: props.submitting || props.disabled,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        "q:slot": "icon"
-      }),
-      props.submitting && /* @__PURE__ */ jsx("span", {
-        class: "animate-spin",
-        children: /* @__PURE__ */ jsx(SpinnersBarsRotateFade, {
-          size: 18
-        })
-      }),
-      /* @__PURE__ */ jsx(Slot, {})
-    ]
+  return /* @__PURE__ */ jsx(ProcessingButton, {
+    ...props,
+    class: `btn-primary ${props.class ?? ""}`,
+    text: props.text || "Submit",
+    processing: props.submitting
   });
 });
 export {

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

@@ -3,6 +3,8 @@ 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$;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: "fieldset",
     children: [
@@ -22,6 +24,10 @@ const TextField = qwik.component$((props) => {
           /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {
             name: "left"
           }),
+          props.icon && /* @__PURE__ */ jsxRuntime.jsx(props.icon, {
+            size: 18,
+            class: "opacity-50"
+          }),
           /* @__PURE__ */ jsxRuntime.jsx("input", {
             type: props.type || "text",
             ...props.id && {
@@ -39,11 +45,11 @@ const TextField = qwik.component$((props) => {
             placeholder: props.placeholder,
             onBlur$: props.onBlur$,
             onInput$: (event, element) => {
-              if (props.value && typeof props.value !== "string") {
-                props.value.value = element.value;
+              if (value && typeof value !== "string") {
+                value.value = element.value;
               }
-              if (props.onInput$) {
-                props.onInput$(event, element);
+              if (onInputHandler) {
+                onInputHandler(event, element);
               }
             }
           }),

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

@@ -1,6 +1,8 @@
 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$;
   return /* @__PURE__ */ jsxs("div", {
     class: "fieldset",
     children: [
@@ -20,6 +22,10 @@ const TextField = component$((props) => {
           /* @__PURE__ */ jsx(Slot, {
             name: "left"
           }),
+          props.icon && /* @__PURE__ */ jsx(props.icon, {
+            size: 18,
+            class: "opacity-50"
+          }),
           /* @__PURE__ */ jsx("input", {
             type: props.type || "text",
             ...props.id && {
@@ -37,11 +43,11 @@ const TextField = component$((props) => {
             placeholder: props.placeholder,
             onBlur$: props.onBlur$,
             onInput$: (event, element) => {
-              if (props.value && typeof props.value !== "string") {
-                props.value.value = element.value;
+              if (value && typeof value !== "string") {
+                value.value = element.value;
               }
-              if (props.onInput$) {
-                props.onInput$(event, element);
+              if (onInputHandler) {
+                onInputHandler(event, element);
               }
             }
           }),

package/lib/index.qwik.cjs

@@ -6,6 +6,8 @@ const alertInfo = require("./components/alert-info.qwik.cjs");
 const alertSuccess = require("./components/alert-success.qwik.cjs");
 const alertWarning = require("./components/alert-warning.qwik.cjs");
 const autoDismiss = require("./components/auto-dismiss.qwik.cjs");
+const button = require("./components/button.qwik.cjs");
+const cancelButton = require("./components/cancel-button.qwik.cjs");
 const checkboxField = require("./components/checkbox-field.qwik.cjs");
 const dialog = require("./components/dialog.qwik.cjs");
 const dock = require("./components/dock.qwik.cjs");
@@ -19,6 +21,8 @@ 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");
@@ -31,6 +35,8 @@ exports.AlertInfo = alertInfo.AlertInfo;
 exports.AlertSuccess = alertSuccess.AlertSuccess;
 exports.AlertWarning = alertWarning.AlertWarning;
 exports.AutoDismiss = autoDismiss.AutoDismiss;
+exports.Button = button.Button;
+exports.CancelButton = cancelButton.CancelButton;
 exports.CheckboxField = checkboxField.CheckboxField;
 exports.Dialog = dialog.Dialog;
 exports.Dock = dock.Dock;
@@ -58,6 +64,8 @@ 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;

package/lib/index.qwik.mjs

@@ -4,6 +4,8 @@ import { AlertInfo } from "./components/alert-info.qwik.mjs";
 import { AlertSuccess } from "./components/alert-success.qwik.mjs";
 import { AlertWarning } from "./components/alert-warning.qwik.mjs";
 import { AutoDismiss } from "./components/auto-dismiss.qwik.mjs";
+import { Button } from "./components/button.qwik.mjs";
+import { CancelButton } from "./components/cancel-button.qwik.mjs";
 import { CheckboxField } from "./components/checkbox-field.qwik.mjs";
 import { Dialog } from "./components/dialog.qwik.mjs";
 import { Dock, DockButton, DockLabel, DockLink } from "./components/dock.qwik.mjs";
@@ -17,6 +19,8 @@ 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";
@@ -30,6 +34,8 @@ export {
   AlertSuccess,
   AlertWarning,
   AutoDismiss,
+  Button,
+  CancelButton,
   CheckboxField,
   Dialog,
   Dock,
@@ -56,6 +62,8 @@ export {
   MenuLink,
   MicrosoftSignInButton,
   PaceBar,
+  ProcessingButton,
+  RefreshButton,
   SelectField,
   Submenu,
   SubmitButton,

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

@@ -1,7 +1,28 @@
 import { QRL } from '@builder.io/qwik';
 export interface AddButtonProps {
+    /**
+     * 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>;
-    id?: string;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Text to display on the button. Default is 'Add'.
+     */
+    text?: string;
+    /**
+     * Size of the icon in pixels if icon is provided in the props. Default is 18.
+     */
+    iconSize?: number;
 }
 export declare const AddButton: import("@builder.io/qwik").Component<AddButtonProps>;

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

@@ -0,0 +1,47 @@
+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>;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Icon component to display next to the button text. You can alternatively use the `icon` slot.
+     */
+    icon?: Component<IconProps>;
+    /**
+     * Size of the icon in pixels if icon is provided in the props. Default is 18.
+     */
+    iconSize?: number;
+    /**
+     * 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;
+}
+/**
+ * Button component.
+ */
+export declare const Button: Component<ButtonProps>;

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

@@ -0,0 +1,28 @@
+import { QRL } from '@builder.io/qwik';
+export interface CancelButtonProps {
+    /**
+     * 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>;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Text to display on the button. Default is 'Cancel'.
+     */
+    text?: string;
+    /**
+     * Size of the icon in pixels if icon is provided in the props. Default is 18.
+     */
+    iconSize?: number;
+}
+export declare const CancelButton: import("@builder.io/qwik").Component<CancelButtonProps>;

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

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

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

@@ -0,0 +1,36 @@
+import { QRL, Signal } from '@builder.io/qwik';
+export interface RefreshButtonProps {
+    /**
+     * 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>;
+    /**
+     * Whether the button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Type of the button. Default is 'button'.
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Text to display on the button. Default is 'Refresh'.
+     */
+    text?: string;
+    /**
+     * Whether the button is processing.
+     */
+    refreshing?: boolean | Signal<boolean>;
+    /**
+     * Size of the icon in pixels if icon is provided in the props. Default is 18.
+     */
+    iconSize?: number;
+}
+export declare const RefreshButton: import("@builder.io/qwik").Component<RefreshButtonProps>;

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

@@ -1,9 +1,32 @@
-import { QRL } from '@builder.io/qwik';
+import { QRL, Signal } from '@builder.io/qwik';
 export interface SubmitButtonProps {
+    /**
+     * 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>;
-    id?: string;
+    /**
+     * Whether the button is disabled.
+     */
     disabled?: boolean;
-    submitting?: boolean;
+    /**
+     * Type of the button. Default is 'button'.
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Text to display on the button. Default is 'Submit'.
+     */
+    text?: string;
+    /**
+     * Whether the button is processing.
+     */
+    submitting?: boolean | Signal<boolean>;
 }
 export declare const SubmitButton: import("@builder.io/qwik").Component<SubmitButtonProps>;

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

@@ -1,4 +1,5 @@
-import { QRL, Signal } from '@builder.io/qwik';
+import { QRL, Signal, Component } from '@builder.io/qwik';
+import { IconProps } from '@nr1e/qwik-icons';
 /**
  * The type of the input field.
  */
@@ -25,9 +26,10 @@ export interface TextFieldProps {
      * Called when the input value changes.
      */
     onInput$?: QRL<(event: InputEvent, element: HTMLInputElement) => void>;
+    icon?: Component<IconProps>;
 }
 /**
  * A standardized text input field meant to be used independently or with Qwik
  * Modular Forms.
  */
-export declare const TextField: import("@builder.io/qwik").Component<TextFieldProps>;
+export declare const TextField: Component<TextFieldProps>;

package/lib-types/index.d.ts

@@ -4,6 +4,8 @@ export * from './components/alert-info';
 export * from './components/alert-success';
 export * from './components/alert-warning';
 export * from './components/auto-dismiss';
+export * from './components/button';
+export * from './components/cancel-button';
 export * from './components/checkbox-field';
 export * from './components/dialog';
 export * from './components/dock';
@@ -17,6 +19,8 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nr1e/qwik-ui",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "NR1E Qwik UI Library",
   "author": "NR1E, Inc.",
   "publishConfig": {
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "@builder.io/qwik-city": "1.19.2",
     "tailwindcss-animated": "2.0.0",
-    "@nr1e/qwik-icons": "0.0.31"
+    "@nr1e/qwik-icons": "0.0.33"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.19.1",