axokit-react 0.0.3 → 0.0.4

package/README.md

@@ -34,6 +34,7 @@ function SaveButton() {
       loadingText="Saving..."
       successText="Saved ✓"
       errorText="Try again"
+      showSpinner // built‑in loader
       disableOnSuccess={false} // optional
       className="px-4 py-2 rounded bg-blue-600 text-white"
     >
@@ -74,6 +75,7 @@ function HookExample() {
 - `successDuration?: number` — default: `1200` ms.
 - `errorDuration?: number` — default: `3000` ms.
 - `disableOnSuccess?: boolean` — default: `true`.
+- `showSpinner?: boolean` — default: `false`. When `true`, a tiny built‑in SVG spinner appears to the left of the label during loading.
 - `onSuccess?: () => void`.
 - `onActionError?: (error: Error) => void`.
 - All other native `button` props are forwarded.

package/dist/index.d.ts

@@ -25,8 +25,10 @@ interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     onSuccess?: () => void;
     onActionError?: (error: Error) => void;
     disableOnSuccess?: boolean;
+    /** automatically render a small spinner next to the label when loading */
+    showSpinner?: boolean;
     children: React.ReactNode;
 }
-declare function AsyncButton({ onAction, loadingText, successText, errorText, successDuration, errorDuration, onSuccess, onActionError, disableOnSuccess, children, disabled, className, ...props }: AsyncButtonProps): react_jsx_runtime.JSX.Element;
+declare function AsyncButton({ onAction, loadingText, successText, errorText, successDuration, errorDuration, onSuccess, onActionError, disableOnSuccess, showSpinner, children, disabled, className, ...props }: AsyncButtonProps): react_jsx_runtime.JSX.Element;
 
 export { AsyncButton, useAsyncAction };

package/dist/index.js

@@ -109,6 +109,7 @@ function AsyncButton({
   onSuccess,
   onActionError,
   disableOnSuccess = true,
+  showSpinner = false,
   children,
   disabled,
   className = "",
@@ -132,6 +133,31 @@ function AsyncButton({
         return children;
     }
   };
+  const renderContent = () => {
+    const label = getLabel();
+    if (state === "loading" && showSpinner) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5em", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            className: "lucide lucide-loader-circle-icon lucide-loader-circle",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+          }
+        ),
+        label
+      ] }) });
+    }
+    return label;
+  };
   const isDisabled = disabled || state === "loading" || state === "success" && disableOnSuccess;
   const { onClick: _nativeOnClick, type: buttonType = "button", ...rest } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -144,7 +170,7 @@ function AsyncButton({
       disabled: isDisabled,
       "aria-busy": state === "loading",
       "data-state": state,
-      children: getLabel()
+      children: renderContent()
     }
   );
 }

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/AsyncButton.tsx
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function useAsyncAction(action, options = {}) {
   const { successDuration = 1200, errorDuration = 3e3, onSuccess, onActionError } = options;
   const [state, setState] = React.useState("idle");
@@ -72,6 +72,7 @@ function AsyncButton({
   onSuccess,
   onActionError,
   disableOnSuccess = true,
+  showSpinner = false,
   children,
   disabled,
   className = "",
@@ -95,6 +96,31 @@ function AsyncButton({
         return children;
     }
   };
+  const renderContent = () => {
+    const label = getLabel();
+    if (state === "loading" && showSpinner) {
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5em", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            className: "lucide lucide-loader-circle-icon lucide-loader-circle",
+            children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+          }
+        ),
+        label
+      ] }) });
+    }
+    return label;
+  };
   const isDisabled = disabled || state === "loading" || state === "success" && disableOnSuccess;
   const { onClick: _nativeOnClick, type: buttonType = "button", ...rest } = props;
   return /* @__PURE__ */ jsx(
@@ -107,7 +133,7 @@ function AsyncButton({
       disabled: isDisabled,
       "aria-busy": state === "loading",
       "data-state": state,
-      children: getLabel()
+      children: renderContent()
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "axokit-react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Headless async button and hook for React",
   "main": "dist/index.js",
   "module": "dist/index.mjs",