First Upload sigpro ui
This commit is contained in:
109
Readme.md
Normal file
109
Readme.md
Normal file
@@ -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.*
|
||||
0
docs/.nojekyll
Normal file
0
docs/.nojekyll
Normal file
116
docs/README.md
Normal file
116
docs/README.md
Normal file
@@ -0,0 +1,116 @@
|
||||
<div class="w-full -mt-10">
|
||||
<section class="relative py-20 overflow-hidden border-b border-base-200/30 text-center flex flex-col items-center">
|
||||
<div class="relative z-10 max-w-5xl mx-auto px-6 flex flex-col items-center">
|
||||
<div class="flex justify-center mb-10 text-secondary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-48 h-48 md:w-64 md:h-64 drop-shadow-2xl" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.8">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI</h1>
|
||||
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System</div>
|
||||
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure Tailwind v4 elegance."</div>
|
||||
<div class="flex flex-wrap justify-center gap-4 w-full">
|
||||
<a href="#/docs" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
|
||||
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">
|
||||
<div class="absolute top-10 right-1/4 w-96 h-96 bg-secondary filter blur-3xl rounded-full animate-pulse"></div>
|
||||
<div class="absolute bottom-10 left-1/4 w-96 h-96 bg-primary filter blur-3xl rounded-full animate-pulse" style="animation-delay: 2s"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="max-w-6xl mx-auto px-6 py-16">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">
|
||||
<div class="card bg-base-200/30 border border-base-300 hover:border-secondary/40 transition-all p-1">
|
||||
<div class="card-body p-6">
|
||||
<h3 class="card-title text-xl font-black text-secondary italic">TAILWIND V4</h3>
|
||||
<p class="text-sm opacity-70">Built on the latest CSS engine. Lightning fast styles with zero legacy overhead.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200/30 border border-base-300 hover:border-accent/40 transition-all p-1">
|
||||
<div class="card-body p-6">
|
||||
<h3 class="card-title text-xl font-black text-accent italic">DAISYUI V5</h3>
|
||||
<p class="text-sm opacity-70">Semantic, beautiful and accessible. Professional components out of the box.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200/30 border border-base-300 hover:border-primary/40 transition-all p-1">
|
||||
<div class="card-body p-6">
|
||||
<h3 class="card-title text-xl font-black text-primary italic">NATIVE REACTION</h3>
|
||||
<p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just speed.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-base-200/30 border border-base-300 hover:border-base-content/20 transition-all p-1">
|
||||
<div class="card-body p-6">
|
||||
<h3 class="card-title text-xl font-black italic text-base-content">READY-TO-GO</h3>
|
||||
<p class="text-sm opacity-70">Import and build. Designed for developers who hate configuration files.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
## The UI Powerhouse
|
||||
|
||||
SigPro-UI isn't just a library; it's a **Functional Design System**.
|
||||
|
||||
It eliminates the gap between your data (Signals) and your layout (DaisyUI). Each component is a high-order function optimized for the SigPro core, ensuring that your UI only updates where it matters.
|
||||
|
||||
| Requirement | Value | Why? |
|
||||
| :--- | :--- | :--- |
|
||||
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
|
||||
| **Styling** | **Tailwind CSS v4** | Pure CSS performance. |
|
||||
| **Components** | **daisyUI v5** | Semantic and clean layouts. |
|
||||
| **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. |
|
||||
|
||||
### Semantic Functionalism
|
||||
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
|
||||
|
||||
```javascript
|
||||
// Pure SigPro-UI: Clean, Reactive, Type-Safe
|
||||
Modal({
|
||||
open: isVisible,
|
||||
title: "Precision Engineering"
|
||||
}, () =>
|
||||
Div({ class: "space-y-4" }, [
|
||||
P("SigPro-UI leverages Tailwind v4 for instant styling."),
|
||||
Button({
|
||||
class: "btn-primary",
|
||||
onclick: () => isVisible(false)
|
||||
}, "Confirm")
|
||||
])
|
||||
)
|
||||
````
|
||||
|
||||
-----
|
||||
|
||||
## Technical Stack Requirements
|
||||
|
||||
To achieve the performance promised by SigPro-UI, your environment must be equipped with:
|
||||
|
||||
### 1\. SigPro Core
|
||||
|
||||
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `$watch`, `$html`, etc.) to be present in the global scope or provided as a module.
|
||||
|
||||
### 2\. Tailwind CSS v4 Engine
|
||||
|
||||
SigPro-UI uses the modern `@theme` and utility engine of Tailwind v4. It is designed to work with the ultra-fast compiler of the new generation.
|
||||
|
||||
### 3\. daisyUI v5
|
||||
|
||||
The visual DNA. All components are mapped to daisyUI v5 semantic classes, providing access to dozens of themes and accessible UI patterns without writing a single line of custom CSS.
|
||||
|
||||
-----
|
||||
|
||||
\<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner"\>
|
||||
\<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center"\>
|
||||
\<div class="lg:col-span-2"\>
|
||||
\<h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-secondary"\>Design at Runtime.\</h2\>
|
||||
\<p class="text-xl opacity-80 leading-relaxed"\>Combine the best of three worlds: \<strong\>SigPro\</strong\> for logic, \<strong\>Tailwind v4\</strong\> for speed, and \<strong\>daisyUI v5\</strong\> for beauty. Build interfaces that feel as fast as they look.\</p\>
|
||||
\</div\>
|
||||
\</div\>
|
||||
\</div\>
|
||||
|
||||
\<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase"\>
|
||||
Atomic UI System — Built for SigPro — NatxoCC
|
||||
\</div\>
|
||||
21
docs/_sidebar.md
Normal file
21
docs/_sidebar.md
Normal file
@@ -0,0 +1,21 @@
|
||||
* [**Home**](README.md)
|
||||
|
||||
* **Introduction**
|
||||
* [Installation](install.md)
|
||||
* [Examples](examples.md)
|
||||
* [Vite Plugin](vite/plugin.md)
|
||||
|
||||
* **API Reference**
|
||||
* [Quick Start](api/quick.md)
|
||||
* [$ signals](api/signal.md)
|
||||
* [$watch](api/watch.md)
|
||||
* [$if](api/if.md)
|
||||
* [$for](api/for.md)
|
||||
* [$router](api/router.md)
|
||||
* [$mount](api/mount.md)
|
||||
* [$html](api/html.md)
|
||||
* [Tags](api/tags.md)
|
||||
* [Global Store](api/global.md)
|
||||
|
||||
* **UI Components**
|
||||
* [Quick Start](ui/quick.md)
|
||||
42
docs/index.html
Normal file
42
docs/index.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SigPro-UI Docs</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'SigPro-UI',
|
||||
repo: '',
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 3,
|
||||
sidebarDisplayLevel: 1,
|
||||
executeScript: true,
|
||||
copyCode: {
|
||||
buttonText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
|
||||
errorText: 'Error',
|
||||
successText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import * as sigpro from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
|
||||
import * as sigproui from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
|
||||
window.sigpro = sigpro;
|
||||
window.sigproui = sigproui;
|
||||
</script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
index.js
Normal file
2
index.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// /plugins/index.js
|
||||
export * from './sigpro-ui/sigpro-ui.js';
|
||||
41
package.json
Normal file
41
package.json
Normal file
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "sigpro-ui",
|
||||
"version": "1.1.0",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"main": "./index.js",
|
||||
"module": "./index.js",
|
||||
"exports": {
|
||||
".": "./index.js"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"sigpro-ui",
|
||||
"vite",
|
||||
"README.md",
|
||||
"LICENSE"
|
||||
],
|
||||
"homepage": "https://natxocc.github.io/sigpro-ui/",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/natxocc/sigpro-ui.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/natxocc/sigpro-ui/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"docs": "bun x serve docs"
|
||||
},
|
||||
"keywords": [
|
||||
"signals",
|
||||
"reactive",
|
||||
"sigpro",
|
||||
"sigpro components",
|
||||
"UI",
|
||||
"web-components",
|
||||
"vanilla-js",
|
||||
"reactive-programming",
|
||||
"signals-library",
|
||||
"fine-grained-reactivity"
|
||||
]
|
||||
}
|
||||
1130
sigpro-ui/sigpro-ui.js
Normal file
1130
sigpro-ui/sigpro-ui.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user