react-iro-gradient-picker 1.0.0 → 1.0.1

package/README.md

@@ -5,11 +5,13 @@
 
 A beautiful, modern React gradient and solid color picker with full dark theme integration, built with Tailwind CSS and TypeScript.
 
-### Inspired by [gpickr](https://github.com/Simonwep/gpickr) and enhanced with modern features
+### 🚀 **[✨ LIVE DEMO & DOCUMENTATION ✨](https://romfatal.github.io/react-iro-gradient-picker/)**
+
+[![NPM](https://img.shields.io/npm/v/react-iro-gradient-picker.svg)](https://www.npmjs.com/package/react-iro-gradient-picker) [![License](https://img.shields.io/npm/l/react-iro-gradient-picker.svg)](https://github.com/romfatal/react-iro-gradient-picker/blob/main/LICENSE) [![GitHub Pages](https://img.shields.io/badge/docs-live-brightgreen)](https://romfatal.github.io/react-iro-gradient-picker/)
 
-[![NPM](https://img.shields.io/npm/v/react-iro-gradient-picker.svg)](https://www.npmjs.com/package/react-iro-gradient-picker) [![License](https://img.shields.io/npm/l/react-iro-gradient-picker.svg)](https://github.com/romfatal/react-iro-gradient-picker/blob/main/LICENSE)
+> 📚 **[Interactive Documentation](https://romfatal.github.io/react-iro-gradient-picker/)** | 📦 **[NPM Package](https://www.npmjs.com/package/react-iro-gradient-picker)** | 🔧 **[GitHub Repository](https://github.com/romfatal/react-iro-gradient-picker)**
 
-**[Demo](https://romfatal.github.io/react-iro-gradient-picker/)**
+### Inspired by [gpickr](https://github.com/Simonwep/gpickr) and enhanced with modern features
 
 ## ✨ Features
 
@@ -20,39 +22,91 @@ A beautiful, modern React gradient and solid color picker with full dark theme i
 - 🎯 **Tailwind CSS** - Modern styling with comprehensive theming system
 - 📱 **Responsive Design** - Works great on all screen sizes
 
-## Install
+## 🎬 Live Demo
+
+### 🚀 **[✨ Try it Live - Interactive Storybook Demo ✨](https://romfatal.github.io/react-iro-gradient-picker/)**
 
-### **Important: this component uses React Hooks and works on React version 16.8.0 and higher**
+Experience all features in action:
+- 🌙 **Dark/Light Theme Toggle** - Switch themes and see all components adapt
+- 🎨 **Solid Color Picker** - Pick any solid color with alpha transparency  
+- 🌈 **Gradient Picker** - Create linear/radial gradients with multiple stops
+- 🔄 **Dual Mode** - Switch between solid and gradient modes seamlessly
+- 📱 **Responsive Design** - Works perfectly on desktop and mobile
+- ⚙️ **All Props & Configuration** - Explore every feature and customization option
+
+**[📚 View Complete Documentation →](https://romfatal.github.io/react-iro-gradient-picker/)**
 
 ---
 
+## 🚀 Quick Start
+
+### Install
+
+**Important: this component uses React Hooks and works on React version 16.8.0 and higher**
+
 ```bash
-npm install --save react-iro-gradient-picker
+npm install react-iro-gradient-picker
 ```
 
-OR
-
 ```bash
 yarn add react-iro-gradient-picker
 ```
 
-## Usage
+```bash
+pnpm add react-iro-gradient-picker
+```
+
+### Basic Usage
 
 ```tsx
-import React from 'react';
-import ReactIroGradientPicker from 'react-iro-gradient-picker';
+import React, { useState } from 'react';
+import ColorPicker from 'react-iro-gradient-picker';
 
 function App() {
-  const onChange = (value) => {
-    console.log(value);
-  };
-
-  return <ReactIroGradientPicker value='red' onChange={onChange} />;
+  const [color, setColor] = useState('#3B82F6');
+
+  return (
+    <ColorPicker
+      solid
+      value={color}
+      onChange={(newColor: string) => {
+        setColor(newColor);
+        return newColor;
+      }}
+    />
+  );
 }
 
 export default App;
 ```
 
+### 🌙 With Dark Theme Support
+
+```tsx
+import React, { useState } from 'react';
+import ColorPicker from 'react-iro-gradient-picker';
+import { ThemeProvider } from 'react-iro-gradient-picker/components/providers/ThemeContext';
+
+function App() {
+  const [color, setColor] = useState('#3B82F6');
+
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <ColorPicker
+        solid
+        gradient
+        value={color}
+        onChange={setColor}
+        showAlpha={true}
+        showInputs={true}
+      />
+    </ThemeProvider>
+  );
+}
+```
+
+### 📚 **[→ View Complete Documentation & Examples](https://romfatal.github.io/react-iro-gradient-picker/)**
+
 ## 🌟 What Makes This Special
 
 This is an enhanced version of the original react-gcolor-picker with major improvements:
@@ -77,10 +131,6 @@ This is an enhanced version of the original react-gcolor-picker with major impro
 - **Updated Dependencies** - Latest versions of all packages
 - **Better Build Process** - Optimized for modern React applications
 
-export default App;
-
-```
-
 ## Props
 
 | Attribute             |    Type    |           Default           | Description                                                                                           |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iro-gradient-picker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Modern React gradient and solid color picker with complete dark theme support, built with TypeScript and Tailwind CSS",
   "keywords": [
     "react",
@@ -54,7 +54,10 @@
     "predeploy": "storybook build",
     "deploy": "gh-pages -d storybook-static/",
     "release": "npm run test && release-it",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "version:patch": "npm version patch && npm publish",
+    "version:minor": "npm version minor && npm publish",
+    "version:major": "npm version major && npm publish"
   },
   "peerDependencies": {
     "react": ">=16.8.0",