sigpro-ui 1.0.6

package/Readme.md

@@ -0,0 +1,146 @@
+# SigPro UI (W.I.P.)
+
+**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**.
+
+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.
+
+---
+
+## Features
+
+* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
+* **DaisyUI v5 Integration**: Beautiful, semantic components 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 with a focus on performance.
+
+---
+
+## Prerequisites
+
+To use SigPro UI, your project must include:
+
+1.  **SigPro Core**: `npm install sigpro` (or via CDN).
+2.  **Tailwind CSS v4**: For utility-first styling.
+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
+
+```Bash
+bun add sigpro-ui
+# or
+npm install sigpro-ui
+```
+
+### Via CDN (Browser)
+
+```html
+<script src="https://unpkg.com/sigpro"></script>
+<script src="https://unpkg.com/sigpro-ui"></script>
+```
+---
+
+## 2. Styling Setup (Tailwind CSS v4)
+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):
+
+```css
+/* src/style.css */
+@import "tailwindcss";
+@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).
+
+### 1. Modular Approach (Tree Shaking)
+Import only the components you need. This keeps your bundle small.
+
+```javascript
+import { $, $mount } from "sigpro";
+import { Button, Modal, Table } from "sigpro-ui";
+
+const App = () => {
+  const show = $(false);
+  return Button({ 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.
+
+```javascript
+import SigproUI from "sigpro-ui";
+
+// Injects Button, Table, Input, Icons, Utils, etc. into window
+SigproUI.install(); 
+
+// Now you can use them directly anywhere:
+const myApp = () => Table({ items: [], columns: [] });
+```
+
+---
+
+## Basic Example
+
+```javascript
+import { $ } from "sigpro";
+import { Button, Toast, Div, H1 } from "sigpro-ui";
+
+const App = () => {
+  const count = $(0);
+
+  return Div({ class: "p-10 flex flex-col gap-4" }, [
+    H1({ class: "text-2xl font-bold" }, "Welcome to SigPro UI"),
+    
+    Button({ 
+      class: "btn-primary", 
+      onclick: () => {
+        count(c => c + 1);
+        Toast(`Count is now ${count()}`, "alert-success");
+      }
+    }, () => `Clicks: ${count()}`)
+  ]);
+};
+```
+
+---
+
+## Components Included
+
+| Category | Components |
+| :--- | :--- |
+| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
+| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
+| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
+| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
+| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
+
+---
+
+## License
+
+MIT © 2026 **SigPro Team**.
+*Engineered for speed, designed for clarity, built for the modern web.*