Independent sigpro vs sigpro-ui
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s

This commit is contained in:
2026-05-04 16:39:57 +02:00
parent 817de6a0ee
commit e6b172efa1
26 changed files with 1596 additions and 2368 deletions

View File

@@ -14,7 +14,7 @@ Based in SigPro Core
**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.
**SigPro UI** is a complete, full self-contained UI library + reactive core in under **35KB gzip** (< 13KB JS + < 22KB CSS). 🎉
**SigPro UI** is a complete, full self-contained UI library in under **35KB gzip** (JS + CSS). 🎉
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.
@@ -36,19 +36,20 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
### ESM / Bundler
```bash
npm install sigpro-ui
npm install sigpro sigpro-ui
# or
bun add sigpro-ui
bun add sigpro sigpro-ui
```
### CDN (Browser - All-in-One)
```html
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
<link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro.min.js"></script>
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
```
**That's it!** The CDN version includes SigPro core internally - no additional scripts needed.
**That's it!** no additional scripts needed.
---
@@ -57,8 +58,9 @@ bun add sigpro-ui
### ESM / Modular (Tree Shaking)
```javascript
import { $, mount, watch, h, Button, Modal, Input, Alert } from "sigpro-ui";
import "sigpro-ui/css";
import { $, mount, watch, h } from "sigpro"; // Core functions
import { Button, Modal, Input, Alert } from "sigpro-ui"; // Components
import "sigpro-ui/css"; // CSS
const App = () => {
const show = $(false);
@@ -111,6 +113,7 @@ mount(App, "#app");
- `when()` - Conditional rendering
- `each()` - List rendering
- `mount()` - Mount components to DOM
- `batch()` - Batch multiple reactive updates into a single flush
> [SigPro Core Docs](https://sigpro.natxocc.com/#/)
@@ -124,23 +127,23 @@ mount(App, "#app");
- And 30+ more!
### Utilities
- `tt()` - i18n translation function (ES/EN)
- `Locale()` - Set global language
- `t()` - i18n translation function
- `setLocale()` - Set global language
---
## Language Support
Built-in i18n with Spanish and English:
Built-in i18n with custom language:
```javascript
import { tt, Locale } from "sigpro-ui";
import { tt, setLocale } from "sigpro-ui";
// Change locale (default is 'es')
Locale('en');
// Change locale
setLocale('en');
// Use translations
Button({}, tt('close'));
Button({}, t('close'));
Input({ placeholder: tt('search') });
```