@unizap/uniui 1.0.7 → 1.0.9

package/README.md

@@ -1,54 +1,172 @@
-# React + TypeScript + Vite
+<p></p>
+<p align="center">
+  <img src="https://ik.imagekit.io/unizap/uniui.svg" alt="UniUI Logo" height="80"/>
+</p>
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<p align="center">
+  <b>UniUI is a comprehensive and highly customizable UI component library built for React. Inspired by modern design principles, UniUI offers a wide range of high-quality, flexible, and easy-to-use components to build elegant and functional user interfaces for web applications.</b>
+</p>
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 🚀 Installation
 
-## Expanding the ESLint configuration
+```sh
+npm i @unizap/uniui
+```
+
+---
+
+
+## ⚡ Usage
+
+Import and use components in your React project:
+
+```tsx
+import { Button, IconButton, Badge, Carousel, EmptyState, PasswordInput } from '@unizap/uniui';
+
+<Button color="amber" variant="filled">Hello UniUI</Button>
+```
+
+---
+
+## 🧩 Components
+
+- **Button**
+- **IconButton**
+- **Badge**
+- **Carousel**
+- **EmptyState**
+- **PasswordInput**
+- **CardWrapper**
+- **Checkbox**
+- **Dropdown**
+- **DropzoneUploader**
+- **Menu**
+- **OtpInput**
+- **Pill**
+- **ProfileImageShowcase**
+- **Stepper**
+- **Table**
+- **TextInput**
+- **Skeleton**
+- **TextArea**
+- **Slider**
+- **Snackbar**
+- **Progress**
+- **ToggleSwitch**
+- **Typography**
+- **Card**
+- **Divider**
+- **RadioGroup**
+- **Select**
+- **Tooltip**
+- **Dialog**
+- **ActionMenu**
+- **Drawer**
+- **Accordion**
+- **Pagination**
+- **Avatar**
+- **Alert**
+- **BottomNavigation**
+- **Breadcrumbs**
+- **DatePicker**
+- **Tabs**
+- **DashboardStatBoxes**
+- **Sidebar**
+
+---
+
+## 🎨 Default Colors
+
+UniUI provides a set of default colors you can use out of the box:
+
+- **dark**
+- **gray**
+- **light**
+- **pearl**
+- **red**
+- **orange**
+- **amber**
+- **yellow**
+- **lime**
+- **green**
+- **emerald**
+- **teal**
+- **cyan**
+- **sky**
+- **blue**
+- **indigo**
+- **violet**
+- **purple**
+- **fuchsia**
+- **pink**
+- **rose**
+
+To use the default color, simply pass its name to the `color` prop:
+
+```tsx
+<Button color="amber">Amber Button</Button>
+<Button color="blue">Blue Button</Button>
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+## 🎨 How to Extend Color
+
+To Extend and build sleek interfaces straight from your markup, you can install **UniCSS**:  
+[![npm version](https://img.shields.io/npm/v/@unizap/unicss?label=UniCSS)](https://www.npmjs.com/package/@unizap/unicss)
+
+
+```sh
+npm i @unizap/unicss
+```
+
+---
+
+You can add custom colors to UniUI's color system using the exported `extendColorMap` and `extendRangeColorMap` functions.
+
+**Example:**
+
+1. Create a file in your project (e.g. `brandColor.js`):
 
 ```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+import { extendColorMap } from "@unizap/uniui";
+
+extendColorMap({
+  brand: {
+    filled: 'bg-color-violet-500 text-color-white',  
+    outline: 'border-color-violet-500 text-color-violet-500',  
+    transparent: 'text-color-violet-500',  
+    accent: 'accent-color-violet-500',  
+    peer: 'peer-checked:border-color-violet-500 peer-checked:text-color-violet-500', 
+  }
+});
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+2. Use your new color in any component:
+
+```jsx
+import './brandColor.js';
+
+<Button color="brand">Brand Button</Button>
+```
+
+You can also extend Slider colors:
 
 ```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+import { extendRangeColorMap } from '@unizap/uniui';
+
+extendRangeColorMap({
+  brand: {
+    track: 'bg-color-brand-200',
+    progress: 'bg-color-brand-500',
+    thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',
+    thumbHover: 'bg-color-brand-600',
+  }
+});
 ```
+
+---
+
+## 📄 License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@unizap/uniui",
-    "version": "1.0.7",
+    "version": "1.0.9",
     "description": "A UI component library for React",
     "type": "module",
     "files": [
@@ -36,6 +36,17 @@
         "prepare": "pnpm run build",
         "storybook": "storybook dev -p 6006"
     },
+    "keywords": [
+    "react",
+    "ui-components",
+    "component-library",
+    "customizable",
+    "design-system",
+    "modern-ui",
+    "web-development",
+    "frontend",
+    "typescript"
+  ],
     "peerDependencies": {
         "react": ">=16.8.0",
         "react-dom": ">=16.8.0"