First Upload sigpro ui

2026-03-30 13:33:06 +02:00
commit 40d3b91c16
8 changed files with 1461 additions and 0 deletions
--- a/Readme.md
+++ b/Readme.md
@@ -0,0 +1,109 @@
+# 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**.
+
+Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** or **"Zero-Import"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that feels like JSX but 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.
+* **No Compilation Needed**: Write standard JavaScript; no Babel or TSC required.
+* **Lightweight**: Minimal footprint with a focus on performance.
+* **Fully Extensible**: Easy to wrap and create custom reactive components.
+
+---
+
+## Prerequisites
+
+To use SigPro UI, your project must include the following dependencies:
+
+### 1. SigPro Core
+The underlying reactivity engine. SigPro UI depends on `$`, `$watch`, `$html`, `$if`, and `$for` being available in the global scope or imported.
+
+### 2. Tailwind CSS v4
+Used for utility-first styling and the engine behind the component layouts.
+
+### 3. daisyUI v5
+The component plugin for Tailwind that provides the visual styles (buttons, modals, cards, etc.).
+
+---
+
+## Installation & Setup
+
+### 1. Configure Tailwind & daisyUI
+Ensure your `tailwind.config.js` (or CSS entry point in v4) is set up to include daisyUI v5.
+
+```css
+/* In your main CSS file (Tailwind v4 style) */
+@import "tailwindcss";
+@plugin "daisyui";
+```
+
+### 2. Include SigPro & SigPro UI
+You can import the modules directly into your application:
+
+```javascript
+import { UI } from "./sigpro-ui.js";
+
+// Initialize the UI library (sets global helpers like Div, Button, Table...)
+// Supports 'en' or 'es' for internal i18n
+UI("en");
+```
+
+---
+
+## Basic Usage
+
+SigPro UI turns standard HTML tags into PascalCase helpers and provides complex components like `Table`, `Modal`, and `Datepicker`.
+
+```javascript
+import { $, $mount } from "sigpro";
+
+const App = () => {
+  const count = $(0);
+  const showModal = $(false);
+
+  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) 
+    }, () => `Clicks: ${count()}`),
+
+    Button({ 
+      class: "btn-outline", 
+      onclick: () => showModal(true) 
+    }, "Open Modal"),
+
+    Modal({ 
+      open: showModal, 
+      title: "Hello!" 
+    }, "This is a reactive modal powered by SigPro.")
+  ]);
+};
+
+$mount(App, "#app");
+```
+
+---
+
+## Components Included
+
+| Category | Components |
+| :--- | :--- |
+| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete` |
+| **Data** | `Table`, `List`, `Stat`, `Badge`, `Indicator`, `Timeline` |
+| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
+| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip`, `Rating` |
+| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
+
+---
+
+## License
+
+MIT © 2026 **SigPro Team**.
+*Engineered for speed, designed for clarity, built for the modern web.*