axokit-react 0.0.5 → 0.0.7

package/README.md

@@ -1,6 +1,6 @@
-# AxoKit — AsyncButton & useAsyncAction
+# AxoKit React — AsyncButton & useAsyncAction
 
-A tiny headless React UI primitive for handling asynchronous button states.
+Production-ready async interaction primitives for React & Next.js.
 
 Package name: `axokit-react` (install with `npm install axokit-react`).
 
@@ -12,12 +12,20 @@ Package name: `axokit-react` (install with `npm install axokit-react`).
 - Minimal styles; load your own CSS or Tailwind classes
 - Works with React 18+
 
+## Why AxoKit?
+
+- Production‑ready async state management with minimal boilerplate.
+- Works with both component and hook patterns.
+- Tiny footprint and zero runtime dependencies.
+- Fully typed for TypeScript and compatible with React 18+.
+- Accessible ARIA attributes and easy styling with Tailwind or CSS.
+
 ## Installation
 
 ```bash
 npm install axokit-react
 # also install peer dependencies
-npm install react react-dom
+Requires `react` and `react-dom` 18+ as peer dependencies.
 ```
 
 ## Usage (component)
@@ -44,6 +52,16 @@ function SaveButton() {
 }
 ```
 
+## Next.js (App Router)
+
+If you're using the App Router, add `'use client'` at the top of your component file:
+
+```tsx
+'use client';
+
+import { AsyncButton } from 'axokit-react';
+```
+
 ## Usage (hook)
 
 ```tsx
@@ -64,11 +82,33 @@ function HookExample() {
 }
 ```
 
+## Example
+
+```tsx
+import { AsyncButton } from 'axokit-react';
+
+function Demo() {
+  const doWork = () => fetch('/api/work');
+  return (
+    <AsyncButton
+      onAction={doWork}
+      loadingText="Working…"
+      successText="Done!"
+      errorText="Failed"
+      showSpinner
+      className="btn"
+    >
+      Click me
+    </AsyncButton>
+  );
+}
+```
+
 ## API
 
 ### `AsyncButton(props)`
 
-- `onAction: () => Promise<any>` — **required**.
+- `onAction: () => Promise<unknown>` — **required**.
 - `loadingText?: string` — default: `"Loading..."`.
 - `successText?: string` — default: `"Done!"`.
 - `errorText?: string` — default: `"Try again"`.
@@ -106,4 +146,6 @@ Use `data-state` to adjust styles via CSS/Tailwind.
 
 MIT
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## Keywords
+
+async, react, async-button, useAsyncAction, hook, component, loading, success, error, state, nextjs, tailwind, aria, accessible, typescript

package/dist/index.d.ts

@@ -14,9 +14,9 @@ interface UseAsyncActionReturn {
     trigger: () => Promise<void>;
     reset: () => void;
 }
-declare function useAsyncAction(action: () => Promise<any>, options?: UseAsyncActionOptions): UseAsyncActionReturn;
+declare function useAsyncAction(action: () => Promise<unknown>, options?: UseAsyncActionOptions): UseAsyncActionReturn;
 interface AsyncButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    onAction: () => Promise<any>;
+    onAction: () => Promise<unknown>;
     loadingText?: string;
     successText?: string;
     errorText?: string;

package/dist/index.js

@@ -138,7 +138,7 @@ function AsyncButton({
     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)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -151,7 +151,11 @@ function AsyncButton({
             "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" })
+            style: { animation: "spin 1s linear infinite" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+            ]
           }
         ),
         label

package/dist/index.mjs

@@ -101,7 +101,7 @@ function AsyncButton({
     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(
+        /* @__PURE__ */ jsxs(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -114,7 +114,11 @@ function AsyncButton({
             "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" })
+            style: { animation: "spin 1s linear infinite" },
+            children: [
+              /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+              /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+            ]
           }
         ),
         label

package/package.json

@@ -1,7 +1,24 @@
 {
   "name": "axokit-react",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Headless async button and hook for React",
+  "keywords": [
+    "react",
+    "async",
+    "async-button",
+    "useAsyncAction",
+    "hook",
+    "component",
+    "loading",
+    "success",
+    "error",
+    "state",
+    "nextjs",
+    "tailwind",
+    "aria",
+    "accessible",
+    "typescript"
+  ],
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",