react-iro-gradient-picker 1.0.0 → 1.0.2

package/README.md

@@ -1,15 +1,18 @@
 <!-- markdownlint-disable -->
+
 # React Iro Gradient Picker
 
 ## ✨ Modern React Color Picker with Complete Dark Theme Support! ✨
 
 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)
+[![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/)
 
-**[Demo](https://romfatal.github.io/react-iro-gradient-picker/)**
+> 📚 **[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)**
+
+### Inspired by [gpickr](https://github.com/Simonwep/gpickr) and enhanced with modern features
 
 ## ✨ Features
 
@@ -20,39 +23,92 @@ 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
 
-### **Important: this component uses React Hooks and works on React version 16.8.0 and higher**
+### 🚀 **[✨ Try it Live - Interactive Storybook Demo ✨](https://romfatal.github.io/react-iro-gradient-picker/)**
+
+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 +133,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                                                                                           |
@@ -195,4 +247,7 @@ Special thanks to the original author for creating such a solid foundation! 🙏
 MIT © [romfatal](https://github.com/romfatal)
 
 Original project: MIT © [undind](https://github.com/undind)
+
+```
+
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-iro-gradient-picker",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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 run deploy && npm version patch && npm publish",
+    "version:minor": "npm run deploy && npm version minor && npm publish",
+    "version:major": "npm run deploy && npm version major && npm publish"
   },
   "peerDependencies": {
     "react": ">=16.8.0",