natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

Browse Source
This commit is contained in:
natxocc
2026-04-01 20:53:41 +02:00
parent c9411be600
commit 5a77deb442
55 changed files with 4137 additions and 5469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
docs/components/button copy.md Normal file
View File

@@ -0,0 +1,248 @@
# Button
Styled button with full DaisyUI support and reactive states.
## Tag
`Button`
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
## Live Examples
### Basic Button
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```
### With Loading State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const LoadingDemo = () => {
const isSaving = $(false);
return Button(
{
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise((resolve) => setTimeout(resolve, 2000));
isSaving(false);
},
},
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
```
### With Badge
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const BadgeDemo = () => {
return Button(
{
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent",
},
"Notifications",
);
};
$mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const TooltipDemo = () => {
return Button(
{
class: "btn btn-ghost",
tooltip: "Delete item",
},
"Delete",
);
};
$mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const DisabledDemo = () => {
const isDisabled = $(true);
return Button(
{
class: "btn btn-primary",
disabled: isDisabled,
},
"Submit",
);
};
$mount(DisabledDemo, "#demo-disabled");
```
### All Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const VariantsDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
```
<script>
(function() {
const initButtonExamples = () => {
// 1. Basic Button
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
$mount(BasicDemo, basicTarget);
}
// 2. Loading State
const loadingTarget = document.querySelector('#demo-loading');
if (loadingTarget && !loadingTarget.hasChildNodes()) {
const LoadingDemo = () => {
const isSaving = $(false);
return Button({
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise(resolve => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes");
};
$mount(LoadingDemo, loadingTarget);
}
// 3. Badge
const badgeTarget = document.querySelector('#demo-badge');
if (badgeTarget && !badgeTarget.hasChildNodes()) {
const BadgeDemo = () => Button({
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
$mount(BadgeDemo, badgeTarget);
}
// 4. Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => Button({
class: "btn btn-ghost",
tooltip: "Delete item"
}, "Delete");
$mount(TooltipDemo, tooltipTarget);
}
// 5. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
const isDisabled = $(true);
return Button({
class: "btn btn-primary",
disabled: isDisabled
}, "Submit");
};
$mount(DisabledDemo, disabledTarget);
}
// 6. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline")
]);
$mount(VariantsDemo, variantsTarget);
}
};
// Ejecutar la función después de definirla
initButtonExamples();
// Registrar para navegación en Docsify
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initButtonExamples);
});
}
})();
</script>

224
docs/components/button.md
View File

@@ -1,51 +1,68 @@
# Button
> # Button(props, children?: string | Signal | [...]): HTMLElement
Styled button with full DaisyUI support and reactive states.
## Tag
`Button`
---
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
| `class` | `string` | `''` | Additional CSS classes (daisyUI) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
## Live Examples
## Class Options
For more detailed information about the underlying styling system, visit the daisyUI documentation:
- [daisyUI Button](https://daisyui.com/components/button)
| Class Name | Category | Description |
| :-------------- | :------------ | :------------------------------------ |
| `btn-neutral` | `Color` 🎨 | Neutral brand color |
| `btn-primary` | `Color` 🎨 | Primary brand color |
| `btn-secondary` | `Color` 🎨 | Secondary brand color |
| `btn-accent` | `Color` 🎨 | Accent brand color |
| `btn-info` | `Color` 🎨 | Informational blue color |
| `btn-success` | `Color` 🎨 | Success green color |
| `btn-warning` | `Color` 🎨 | Warning yellow color |
| `btn-error` | `Color` 🎨 | Error red color |
| `btn-xl` | `Size` 📏 | Extra large scale |
| `btn-lg` | `Size` 📏 | Large scale |
| `btn-md` | `Size` 📏 | Medium scale (Default) |
| `btn-sm` | `Size` 📏 | Small scale |
| `btn-xs` | `Size` 📏 | Extra small scale |
| `btn-outline` | `Style` ✨ | Transparent with colored border |
| `btn-dash` | `Style` ✨ | Dashed border style |
| `btn-soft` | `Style` ✨ | Low opacity background color |
| `btn-ghost` | `Style` ✨ | No background, hover effect only |
| `btn-link` | `Style` ✨ | Looks like a text link |
| `btn-square` | `Shape` 📐 | 1:1 aspect ratio |
| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners |
| `btn-wide` | `Shape` 📐 | Extra horizontal padding |
| `btn-block` | `Shape` 📐 | Full width of container |
| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state |
| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state |
### Basic Button
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
return Button({ class: "btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```
### With Loading State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const LoadingDemo = () => {
@@ -53,7 +70,7 @@ const LoadingDemo = () => {
return Button(
{
class: "btn btn-success",
class: "btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
@@ -69,18 +86,13 @@ $mount(LoadingDemo, "#demo-loading");
### With Badge
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const BadgeDemo = () => {
return Button(
{
class: "btn btn-outline",
class: "btn-outline",
badge: "3",
badgeClass: "badge-accent",
},
@@ -92,18 +104,13 @@ $mount(BadgeDemo, "#demo-badge");
### With Tooltip
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const TooltipDemo = () => {
return Button(
{
class: "btn btn-ghost",
class: "btn-ghost",
tooltip: "Delete item",
},
"Delete",
@@ -114,12 +121,7 @@ $mount(TooltipDemo, "#demo-tooltip");
### Disabled State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const DisabledDemo = () => {
@@ -127,8 +129,7 @@ const DisabledDemo = () => {
return Button(
{
class: "btn btn-primary",
disabled: isDisabled,
class: "btn-primary btn-disabled",
},
"Submit",
);
@@ -138,111 +139,30 @@ $mount(DisabledDemo, "#demo-disabled");
### All Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const VariantsDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline"),
Button({ class: "btn-primary" }, "Primary"),
Button({ class: "btn-secondary" }, "Secondary"),
Button({ class: "btn-accent" }, "Accent"),
Button({ class: "btn-ghost" }, "Ghost"),
Button({ class: "btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
```
<script>
(function() {
const initButtonExamples = () => {
// 1. Basic Button
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
$mount(BasicDemo, basicTarget);
}
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
// 2. Loading State
const loadingTarget = document.querySelector('#demo-loading');
if (loadingTarget && !loadingTarget.hasChildNodes()) {
const LoadingDemo = () => {
const isSaving = $(false);
return Button({
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise(resolve => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes");
};
$mount(LoadingDemo, loadingTarget);
}
// 3. Badge
const badgeTarget = document.querySelector('#demo-badge');
if (badgeTarget && !badgeTarget.hasChildNodes()) {
const BadgeDemo = () => Button({
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
$mount(BadgeDemo, badgeTarget);
}
// 4. Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => Button({
class: "btn btn-ghost",
tooltip: "Delete item"
}, "Delete");
$mount(TooltipDemo, tooltipTarget);
}
// 5. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
const isDisabled = $(true);
return Button({
class: "btn btn-primary",
disabled: isDisabled
}, "Submit");
};
$mount(DisabledDemo, disabledTarget);
}
// 6. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline")
]);
$mount(VariantsDemo, variantsTarget);
}
};
// Ejecutar la función después de definirla
initButtonExamples();
// Registrar para navegación en Docsify
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initButtonExamples);
});
}
})();
</script>
```javascript
const TestDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
$html("span", {class: "indicator"},[
5,
Button('Click')])
]);
};
$mount(TestDemo, "#demo-test");
```

47
docs/index.html
View File

@@ -17,6 +17,13 @@
/>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style>
/* Personaliza los callouts si quieres */
.markdown-section .callout {
margin: 1.5rem 0;
}
</style>
</head>
<body>
<div id="app"></div>
@@ -26,26 +33,40 @@
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>',
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>',
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>',
},
plugins: [
function(hook, vm) {
hook.doneEach(function() {
// Buscamos los bloques de código JS que queremos ejecutar
const codeBlocks = document.querySelectorAll('pre[data-lang="javascript"] code');
codeBlocks.forEach(code => {
// Usamos un bloque try/catch por si el código del Markdown tiene errores
try {
// Ejecutamos el código.
// Como tu librería ya puso $, $mount, Button, etc. en 'window',
// el código los encontrará directamente.
const runDemo = new Function(code.innerText);
runDemo();
} catch (err) {
console.error("Error en la demo de SigPro:", err);
}
});
});
}
]
};
</script>
<!-- <script src="https://unpkg.com/sigpro"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script> -->
<script src="./sigpro.min.js"></script>
<script src="./sigpro-ui.umd.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.js"></script> -->
<!-- <script src="https://unpkg.com/sigpro-ui"></script> -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify@4.13.0/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/docsify-plugin-flexible-alerts.min.js"></script>
<script src="./sigpro-ui.min.js"></script>
</body>
</html>
</html>

216
docs/install.md
View File

@@ -4,13 +4,18 @@ Follow these steps to integrate **SigPro-UI** into your project.
## Prerequisites
Make sure your project already has:
- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
- [daisyUI v5](https://daisyui.com/) installed.
## 1️.Install the package
---
!> **📘 Core Concepts**
**Note:** SigPro-UI now includes SigPro core internally. You no longer need to install SigPro separately.
SigProUI is built on top of the [SigPro](https://natxocc.github.io/sigpro/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://natxocc.github.io/sigpro/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
---
## 1. Install the package
Choose your preferred package manager:
@@ -24,7 +29,7 @@ bun add sigpro-ui
yarn add sigpro-ui
```
## 2️.Configure CSS
## 2. Configure CSS
Add the following to your main CSS file (e.g., `app.css`):
@@ -35,48 +40,67 @@ Add the following to your main CSS file (e.g., `app.css`):
> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
## 3️.Import and initialize in your app
## 3. Import and use in your app
Create or update your `main.js` (or `index.js`):
### ESM / Module usage
```javascript
// Import required modules
import { $, $mount } from "sigpro";
import { UI } from "sigpro-ui";
// Import everything from sigpro-ui (includes sigpro core)
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
// Import your CSS (adjust the path if needed)
import "./app.css";
// Import your main App component
import { App } from "./App.js";
// Initialize SigPro-UI (English locale)
UI("en");
// Create your app
const App = () => {
const count = $(0);
return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
label: 'Your name',
placeholder: 'Enter your name...'
}),
Button({
class: 'btn-primary mt-4',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`),
Alert({
type: 'success',
message: () => `Welcome to SigProUI!`
})
]);
};
// Mount your app
$mount(App, "#app");
```
## 4️.Create your first component
Example `App.js`:
### CommonJS usage
```javascript
import { Div, Button, Alert } from "sigpro-ui";
const { $, $mount, Button, Input, Alert } = require('sigpro-ui');
export const App = () => {
return Div({ class: "p-4" }, [
Button({
class: "btn-primary",
onclick: () => Alert("Hello SigPro-UI!")
}, "Click Me")
const App = () => {
const count = $(0);
return $html('div', { class: 'p-8' }, [
Button({
class: 'btn-primary',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`)
]);
};
$mount(App, "#app");
```
## Optional: Use CDN (no build step)
## 4. CDN Usage (no build step)
If you prefer not to use a build step, you can import directly from a CDN:
Simply add the script tag and start using SigProUI:
```html
<!DOCTYPE html>
@@ -84,46 +108,134 @@ If you prefer not to use a build step, you can import directly from a CDN:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="importmap">
{
"imports": {
"sigpro": "https://esm.run/sigpro",
"sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
}
}
</script>
<title>SigProUI Demo</title>
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.css" rel="stylesheet">
<style>
@import "tailwindcss";
@plugin "daisyui";
body { padding: 2rem; }
</style>
</head>
<body>
<div id="app"></div>
<script type="module">
import { $, $mount } from "sigpro";
import { UI, Div, Button, Alert } from "sigpro-ui";
UI("en");
const App = () => Div({ class: "p-4" }, [
Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
]);
$mount(App, "#app");
<script>
// All functions are available directly in window
// No need to import anything!
const { $, $mount, Button, Input, Alert } = window;
const App = () => {
const name = $('');
const count = $(0);
return $html('div', { class: 'max-w-md mx-auto p-4' }, [
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
Input({
label: 'Your name',
value: name,
placeholder: 'Enter your name...'
}),
Button({
class: 'btn-primary mt-4',
onclick: () => count(count() + 1)
}, () => `Clicks: ${count()}`),
Alert({
type: 'success',
message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
})
]);
};
$mount(App, '#app');
</script>
</body>
</html>
```
## What's included?
When you install SigProUI, you get:
### SigPro Core Functions
- `$()` - Reactive signals
- `$watch()` - Watch reactive dependencies
- `$html()` - Create HTML elements with reactivity
- `$if()` - Conditional rendering
- `$for()` - List rendering
- `$router()` - Hash-based routing
- `$mount()` - Mount components to DOM
### UI Components
- `Button()` - Styled button with DaisyUI
- `Input()` - Form input with floating labels
- `Alert()` - Alert messages
- `Modal()` - Modal dialogs
- `Table()` - Data tables
- `Tabs()` - Tabbed interfaces
- And 30+ more components!
### Utilities
- `Icons` - SVG icon set
- `Utils` - Helper functions (joinClass, val)
- `tt()` - i18n translation function
## Language Support
SigProUI includes built-in i18n with Spanish and English:
```javascript
import { tt } from 'sigpro-ui';
// Change locale (default is 'es')
tt.setLocale('en');
// Use translations
const closeButton = Button({}, tt('close')());
const searchPlaceholder = Input({ placeholder: tt('search')() });
```
Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata`
## TypeScript Support
SigProUI includes TypeScript definitions. Import types as needed:
```typescript
import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
const MyButton: React.FC<ButtonProps> = (props) => {
return Button(props, 'Click me');
};
```
## Troubleshooting
| Problem | Solution |
| :--- | :--- |
| Components don't look styled | Check that `app.css` is imported and contains the Tailwind + daisyUI directives. |
| `UI is not defined` | Make sure you call `UI()` **before** using any component like `Button`, `Input`, etc. |
| Locale not working | Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`. |
| Build errors with Tailwind v4 | Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured. |
| Components don't look styled | Check that you've included Tailwind + daisyUI CSS (either via import or CDN) |
| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
| Build errors | Ensure you're using a modern bundler that supports ESM |
| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
| Locale not working | Set locale with `tt.setLocale('en')` before using translations |
## Migration from older versions
If you were using SigProUI v1.0.x with separate SigPro installation:
**Before:**
```javascript
import { $ } from 'sigpro';
import { Button } from 'sigpro-ui';
```
**Now:**
```javascript
import { $, Button } from 'sigpro-ui';
// That's it! Everything comes from one package.
```
**Happy coding!** 🎉

7
docs/sigpro-ui.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/sigpro-ui.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
docs/sigpro.min.js vendored
View File

File diff suppressed because one or more lines are too long