Update Readme.md

Readme.md

@@ -1,6 +1,6 @@
 # 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 with **native daisyUI styling** out of the box.
+**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 **zero external dependencies** - everything is included.
 
 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.
 
@@ -9,11 +9,11 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 ## Features
 
 - **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
-- **Native daisyUI Styling**: Beautiful, semantic components out of the box
+- **Self-Contained Styling**: Full CSS included - no external frameworks needed
-- **CSS Framework Friendly**: Use Tailwind, UnoCSS, or any other library for grids and utilities
+- **Built on Tailwind CSS v4 + daisyUI v5**: Modern, utility-first styling out of the box
 - **Tree Shaking Ready**: Import only what you need
 - **Zero-Import Option**: Inject all components into the global scope with one command
-- **Lightweight**: Minimal footprint, fully reactive
+- **Lightweight**: Minimal footprint with everything bundled
 
 ---
 
@@ -22,56 +22,18 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 ### Via NPM / Bun
 
 ```bash
-# Install SigPro core first
-bun add sigpro
-# or
-npm install sigpro
-
-# Install SigPro UI
-bun add sigpro-ui
-# or
 npm install sigpro-ui
 ```
 
 ### Via CDN (Browser)
 
 ```html
+<!-- SigPro core + UI with styles included -->
 <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">
 ```
 
----
+**That's it!** No additional CSS files, no configuration, no build step.
-
-## Styling Setup
-
-SigPro UI components are **pre-styled with daisyUI v5** and work immediately after adding the daisyUI CSS:
-
-```html
-<!-- Add daisyUI CSS (required for default styles) -->
-<link href="https://cdn.jsdelivr.net/npm/daisyui@5/dist/full.css" rel="stylesheet">
-```
-
-### 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.
 
 ---
 
@@ -112,7 +74,7 @@ import SigproUI from "sigpro-ui";
 // Injects Button, Table, Input, Alert, etc. into window
 SigproUI.install(); 
 
-// Now use them directly anywhere:
+// Now you can use them directly anywhere:
 const myApp = () => Table({ items: [], columns: [] });
 ```
 
@@ -184,30 +146,41 @@ const dateRange = $(null);
 Datepicker({ 
   range: true, 
   value: dateRange,
-  hour: true
+  hour: true  // Include time selection
 });
 ```
 
-### File upload
+### File upload with drag & drop
 
 ```javascript
 import { Fileinput } from "sigpro-ui";
 
 Fileinput({
-  max: 5,
+  max: 5,  // Max size in MB
   accept: "image/*",
   onSelect: (files) => console.log(files)
 });
 ```
 
-### Using with Tailwind utilities
+---
 
-```javascript
+## Styling Customization
-// daisyUI provides component styles, Tailwind adds spacing utilities
+
-Div({ class: "grid grid-cols-2 gap-4 p-6" }, [
+SigPro UI comes with **Tailwind CSS v4 + daisyUI v5** pre-bundled. You can customize the theme by overriding CSS variables:
-  Button({ class: "btn-primary col-span-1" }, "Save"),
+
-  Button({ class: "btn-ghost col-span-1" }, "Cancel")
+```css
-])
+/* Override default theme colors */
+:root {
+  --color-primary: oklch(45% .24 277.023);
+  --color-secondary: oklch(65% .241 354.308);
+  --color-accent: oklch(77% .152 181.912);
+}
+
+/* Or use data attributes for dark/light mode */
+[data-theme="dark"] {
+  --color-base-100: oklch(25.33% .016 252.42);
+  --color-primary: oklch(58% .233 277.117);
+}
 ```
 
 ---