jattac.libs.web.zest-button 1.2.2 → 1.2.4

package/docs/features.md

@@ -0,0 +1,113 @@
+# Features: A Guided Tour
+
+This document provides a high-level showcase of what's possible with `ZestButton`. For detailed, practical implementation guides, please see our **[Cookbook](./examples.md)**.
+
+---
+
+### Asynchronous Operations & Feedback
+
+**What it does:** Automatically handles loading states and provides clear success/failure feedback for any action that returns a Promise.
+
+```tsx
+const MyComponent = () => {
+  const handleAsyncClick = async () => {
+    // Simulate an API call that takes 2 seconds
+    await new Promise(resolve => setTimeout(resolve, 2000));
+  };
+
+  return (
+    <ZestButton onClick={handleAsyncClick}>
+      Perform Async Action
+    </ZestButton>
+  );
+};
+```
+*__Learn more in the [Your First Async Button recipe](./examples.md#recipe-1-your-first-async-button).__*
+
+---
+
+### Confirmation Flow
+
+**What it does:** Protects users from accidentally performing critical actions by requiring a second click to confirm.
+
+```tsx
+const MyComponent = () => {
+  const handleDelete = () => alert('The item has been deleted!');
+
+  return (
+    <ZestButton
+      onClick={handleDelete}
+      zest={{
+        confirmOptions: { displayLabel: 'Confirm?', timeoutSecs: 5 },
+        visualOptions: { variant: 'danger' }
+      }}
+    >
+      Delete Item
+    </ZestButton>
+  );
+};
+```
+*__Learn more in the [Safe "Delete" Button recipe](./examples.md#recipe-2-the-safe-delete-button).__*
+
+---
+
+### Semantic Types
+
+**What it does:** Streamlines development by allowing you to declare button intent (e.g., `'save'`, `'delete'`). The button automatically gets appropriate icons, colors, and behaviors.
+
+```tsx
+const MyComponent = () => (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+        <ZestButton zest={{ semanticType: 'save' }}>Save</ZestButton>
+        <ZestButton zest={{ semanticType: 'cancel' }}>Cancel</ZestButton>
+    </div>
+);
+```
+*__Learn how to create your own in the [Creating a Custom "Archive" Button recipe](./examples.md#recipe-4-creating-a-custom-archive-button).__*
+
+---
+
+### Global Configuration
+
+**What it does:** Allows you to define a consistent style (like size or button style) for all buttons across your entire application.
+
+```tsx
+// In your App.tsx
+const appZestConfig = {
+  defaultProps: {
+    visualOptions: { size: 'sm' },
+    buttonStyle: 'outline',
+  },
+};
+
+const App = () => (
+  <ZestProvider config={appZestConfig}>
+    {/* All buttons inside will be small and outline by default */}
+  </ZestProvider>
+);
+```
+*__Learn more in the [Standardizing Your Buttons recipe](./examples.md#recipe-3-standardizing-your-buttons-with-a-global-config).__*
+
+---
+
+### Rich Styling
+
+**What it does:** Provides multiple variants, sizes, and styles (`solid`, `outline`, `text`, `dashed`) to fit any UI context. It also automatically adapts to light and dark themes.
+
+```tsx
+const MyComponent = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+    <ZestButton zest={{ visualOptions: { variant: 'success', size: 'sm' } }}>
+      Small Success
+    </ZestButton>
+    <ZestButton zest={{ buttonStyle: 'outline', size: 'md' } }}>
+      Medium Outline
+    </ZestButton>
+    <ZestButton zest={{ visualOptions: { variant: 'danger', size: 'lg' } }}>
+      Large Danger
+    </ZestButton>
+  </div>
+);
+```
+*Explore all the recipes in the **[Cookbook](./examples.md)** to see these options in action.*
+

package/package.json

@@ -1,35 +1,53 @@
 {
   "name": "jattac.libs.web.zest-button",
-  "version": "1.2.2",
-  "description": "A highly customizable and interactive React button component with built-in features for handling asynchronous operations, visual feedback, and confirmation flows.",
+  "version": "1.2.4",
+  "description": "A highly customizable and production-ready React button component featuring robust asynchronous handling, rich visual feedback, and built-in confirmation flows for enhanced user experience",
+  "homepage": "https://github.com/nyingimaina/jattac.libs.web.zest-button.git#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nyingimaina/jattac.libs.web.zest-button.git.git"
+  },
+  "bugs": {
+    "url": "https://github.com/nyingimaina/jattac.libs.web.zest-button.git/issues"
+  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "docs"
   ],
   "scripts": {
     "build": "rollup -c rollup.config.mjs",
-    "dev": "rollup -c rollup.config.mjs -w"
+    "dev": "rollup -c rollup.config.mjs -w",
+    "test": "echo \"No tests specified. See WORKPLAN.md for future plans.\" && exit 0"
   },
   "keywords": [
     "react",
     "button",
     "ui",
     "component",
-    "zest",
+    "interactive",
+    "react-button",
+    "form",
+    "web",
     "async",
     "loading",
     "confirmation",
     "feedback",
+    "animation",
+    "transitions",
+    "ux",
+    "zest",
     "jattac"
   ],
   "author": "Jattac",
   "license": "MIT",
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -42,7 +60,6 @@
     "postcss-modules": "6.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
     "rollup": "^4.13.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",