Update Readme.md

Readme.md

@@ -1,6 +1,6 @@
-# SigPro UI (W.I.P.)
+# SigPro UI
 
-**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components leveraging the power of **Tailwind CSS v4** and **daisyUI v5**.
+**SigPro UI** is a lightweight, ultra-fast, and reactive component library built for the **SigPro** reactivity core. It provides a set of high-quality, accessible, and themeable UI components with **native daisyUI styling** out of the box.
 
 Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
 
@@ -8,37 +8,26 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 
 ## Features
 
-* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
+- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
-* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box.
+- **Native daisyUI Styling**: Beautiful, semantic components out of the box
-* **Tree Shaking Ready**: Import only what you need.
+- **CSS Framework Friendly**: Use Tailwind, UnoCSS, or any other library for grids and utilities
-* **Zero-Import Option**: Inject all components into the global scope with one command.
+- **Tree Shaking Ready**: Import only what you need
-* **Lightweight**: Minimal footprint with a focus on performance.
+- **Zero-Import Option**: Inject all components into the global scope with one command
+- **Lightweight**: Minimal footprint, fully reactive
 
 ---
 
-## Prerequisites
+## Installation
 
-To use SigPro UI, your project must include:
+### Via NPM / Bun
 
-1.  **SigPro Core**: `npm install sigpro` (or via CDN).
+```bash
-2.  **Tailwind CSS v4**: For utility-first styling.
+# Install SigPro core first
-3.  **daisyUI v5**: The component engine for Tailwind.
-
-
-## 1. Prerequisites & Installation
-SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first.
-
-### Step 1: Install SigPro Core
-
-```Bash
 bun add sigpro
 # or
 npm install sigpro
-```
 
-### Step 2: Install SigPro UI
+# Install SigPro UI
-
-```Bash
 bun add sigpro-ui
 # or
 npm install sigpro-ui
@@ -49,55 +38,81 @@ npm install sigpro-ui
 ```html
 <script src="https://unpkg.com/sigpro"></script>
 <script src="https://unpkg.com/sigpro-ui"></script>
+<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
 ```
+
 ---
 
-## 2. Styling Setup (Tailwind CSS v4)
+## Styling Setup
-SigPro UI components rely on **Tailwind CSS** and **daisyUI** for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point.
 
-Create or edit your global CSS file (e.g., style.css):
+SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS:
 
-```css
+```html
-/* src/style.css */
+<!-- Add daisyUI CSS (required for default styles) -->
-@import "tailwindcss";
+<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
-@plugin "daisyui";
-
-/* Optional: Your custom theme overrides */
-:root {
-  --primary: #570df8;
-  --secondary: #f000b8;
-}
 ```
----
-## Setup & Usage
 
-You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
+### Want additional utilities?
+
+You're free to add **Tailwind CSS**, **UnoCSS**, or any other CSS framework for:
+
+- Grid systems (`grid`, `flex`, etc.)
+- Spacing utilities (`p-4`, `m-2`, `gap-4`)
+- Typography helpers (`text-center`, `font-bold`)
+- Custom responsive behaviors
+
+These will work **alongside** daisyUI without conflicts. Example:
+
+```html
+<!-- Add Tailwind for utilities (optional) -->
+<script src="https://cdn.tailwindcss.com"></script>
+
+<!-- Or UnoCSS -->
+<script src="https://unpkg.com/unocss"></script>
+```
+
+> **Note**: Your components will inherit daisyUI styles by default. Tailwind/ UnoCSS only add extra utilities without overriding component styles.
+
+---
+
+## Usage
+
+You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping).
 
 ### 1. Modular Approach (Tree Shaking)
-Import only the components you need. This keeps your bundle small.
+
+Import only the components you need:
 
 ```javascript
 import { $, $mount } from "sigpro";
-import { Button, Modal, Table } from "sigpro-ui";
+import { Button, Modal, Input, Alert } from "sigpro-ui";
 
 const App = () => {
   const show = $(false);
-  return Button({ onclick: () => show(true) }, "Open Modal");
+  
+  return Button(
+    { 
+      class: "btn-primary", 
+      onclick: () => show(true) 
+    }, 
+    "Open Modal"
+  );
 };
 
 $mount(App, "#app");
 ```
 
 ### 2. Global Approach (Zero-Import)
-Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports.
+
+Inject all components into the `window` object:
 
 ```javascript
 import SigproUI from "sigpro-ui";
 
-// Injects Button, Table, Input, Icons, Utils, etc. into window
+// Injects Button, Table, Input, Alert, etc. into window
 SigproUI.install(); 
 
-// Now you can use them directly anywhere:
+// Now use them directly anywhere:
 const myApp = () => Table({ items: [], columns: [] });
 ```
 
@@ -124,6 +139,8 @@ const App = () => {
     }, () => `Clicks: ${count()}`)
   ]);
 };
+
+$mount(App, "#app");
 ```
 
 ---
@@ -132,7 +149,7 @@ const App = () => {
 
 | Category | Components |
 | :--- | :--- |
-| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
+| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`, `Fileinput` |
 | **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
 | **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
 | **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
@@ -140,7 +157,62 @@ const App = () => {
 
 ---
 
+## Component Examples
+
+### Form with validation
+
+```javascript
+import { Input, Button } from "sigpro-ui";
+
+const email = $("");
+
+Input({
+  type: "email",
+  value: email,
+  placeholder: "your@email.com",
+  validate: (v) => !v.includes("@") ? "Invalid email" : null
+});
+```
+
+### Datepicker with range
+
+```javascript
+import { Datepicker } from "sigpro-ui";
+
+const dateRange = $(null);
+
+Datepicker({ 
+  range: true, 
+  value: dateRange,
+  hour: true
+});
+```
+
+### File upload
+
+```javascript
+import { Fileinput } from "sigpro-ui";
+
+Fileinput({
+  max: 5,
+  accept: "image/*",
+  onSelect: (files) => console.log(files)
+});
+```
+
+### Using with Tailwind utilities
+
+```javascript
+// daisyUI provides component styles, Tailwind adds spacing utilities
+Div({ class: "grid grid-cols-2 gap-4 p-6" }, [
+  Button({ class: "btn-primary col-span-1" }, "Save"),
+  Button({ class: "btn-ghost col-span-1" }, "Cancel")
+])
+```
+
+---
+
 ## License
 
-MIT © 2026 **SigPro Team**.
+MIT © 2026 **SigPro Team**  
 *Engineered for speed, designed for clarity, built for the modern web.*