diff --git a/package.json b/package.json
index b48c69f..06ac07a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "sigpro",
- "version": "1.0.11",
+ "version": "1.0.12",
"type": "module",
"license": "MIT",
"homepage": "https://natxocc.github.io/sigpro/",
@@ -14,13 +14,9 @@
"scripts": {
"docs:dev": "vitepress dev packages/docs",
"docs:build": "vitepress build packages/docs",
- "docs:preview": "vitepress preview packages/docs",
- "ui:dev": "vite packages/sigproui",
- "ui:build": "vite build packages/sigproui"
+ "docs:preview": "vitepress preview packages/docs"
},
"devDependencies": {
- "@tailwindcss/vite": "^4.2.2",
- "vite": "^8.0.0",
"vitepress": "^1.6.4"
},
"keywords": [
@@ -31,8 +27,5 @@
"reactive-programming",
"signals-library",
"fine-grained-reactivity"
- ],
- "dependencies": {
- "daisyui": "^5.5.19"
- }
+ ]
}
\ No newline at end of file
diff --git a/packages/sigproui/app.js b/packages/sigproui/app.js
deleted file mode 100644
index 52a9964..0000000
--- a/packages/sigproui/app.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * UI Demo/Test - Para probar componentes localmente sin hacer release
- *
- * Ejecutar:
- * 1. Crear un archivo index.html que importe este archivo
- * 2. O usar con Vite: bun add -d vite && bun vite UI/app.js
- *
- * Alternativamente, simplemente copiar las partes que necesitas a tu proyecto
- */
-import { $, html, effect } from "../../index.js";
-import { Button, Input, Card, Drawer, Menu, Dropdown, Fab, Dialog, Loading } from "./index.js";
-
-// Importar la función helper de loading
-import { loading } from "./components/Loading.js";
-
-// Estado para la demo
-const state = {
- inputValue: $(""),
- checkboxValue: $(false),
- radioValue: $("option1"),
- rangeValue: $(50),
- showDialog: $(false),
- openDrawer: $(false),
-};
-
-// Menú de navegación
-const menuItems = [
- { label: "Home", icon: "icon-[lucide--home]", href: "#/home" },
- { label: "About", icon: "icon-[lucide--info]", href: "#/about" },
- {
- label: "Components",
- icon: "icon-[lucide--box]",
- open: false,
- sub: [
- { label: "Button", href: "#/button" },
- { label: "Input", href: "#/input" },
- { label: "Card", href: "#/card" },
- { label: "Forms", href: "#/forms" },
- ]
- },
-];
-
-// Demo page principal
-export default function App() {
- effect(() => {
- console.log("Input value:", state.inputValue());
- });
-
- return html`
-
-
-
-
-
-
-
-
-
-
-
- Buttons
-
- console.log("Primary clicked")}>Primary
- Secondary
- Accent
- Ghost
- Link
- Loading
- Disabled
- With Badge
- With Tooltip
-
-
-
-
-
- Input
-
- state.inputValue(v)}
- placeholder="Enter username"
- >
-
-
-
-
-
- Current input value: "${state.inputValue()}"
-
-
-
-
- Card
-
- Card Title
- This is a basic card with some content.
-
- Accept
- Cancel
-
-
-
-
- Card with Image
- Beautiful flower image
-
- Buy Now
-
-
-
-
-
-
- Form Controls
-
-
-
state.checkboxValue(v)}
- >
-
Checkbox value: ${() => state.checkboxValue() ? "checked" : "unchecked"}
-
-
- state.radioValue() === "option1"}
- .value=${"option1"}
- label="Option 1"
- @change=${(v) => state.radioValue(v)}
- >
- state.radioValue() === "option2"}
- .value=${"option2"}
- label="Option 2"
- @change=${(v) => state.radioValue(v)}
- >
- state.radioValue() === "option3"}
- .value=${"option3"}
- label="Option 3"
- @change=${(v) => state.radioValue(v)}
- >
-
-
Radio value: "${state.radioValue()}"
-
-
-
state.rangeValue(Number(v))}
- >
-
Range value: ${state.rangeValue()}
-
-
-
Loading
-
- loading(true, "Loading...")}>
- Show Loading
-
- loading(false)}>
- Hide Loading
-
-
-
-
-
-
- Dialog
- state.showDialog(true)}>Open Dialog
-
- state.showDialog(false)}>
- Confirm Action
- Are you sure you want to proceed?
-
- state.showDialog(false)}>Cancel
- { console.log("Confirmed!"); state.showDialog(false); }}>Confirm
-
-
-
-
-
-
-
-
-
- FAB (Floating Action Button)
-
-
-
-
-
props.tooltip() ?? ""}>
-
-
- `;
- },
- ["ui", "loading", "badge", "tooltip", "disabled"],
-);
diff --git a/packages/sigproui/components/Card.js b/packages/sigproui/components/Card.js
deleted file mode 100644
index b85cfe3..0000000
--- a/packages/sigproui/components/Card.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-card",
- (props, host) => {
- return html`
-
- ${() =>
- props.img()
- ? html`
-
-  => props.img()})
-
- `
- : null}
-
-
-
${host.slot("title")}
-
${host.slot("body")}
-
${host.slot("actions")}
-
-
-
- ${() =>
- palette.map(
- (c) => html`
-
- `,
- )}
-
-
-
-
props.color()}
- @input=${(e) => handleSelect(e.target.value)} />
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${() => viewDate().toLocaleString("es-ES", { month: "long" }).toUpperCase()}
- ${() => viewDate().getFullYear()}
-
-
-
-
-
-
-
-
-
-
- ${() =>
- ["L", "M", "X", "J", "V", "S", "D"].map(
- (l) => html`
-
${l}
- `,
- )}
- ${() =>
- days().map((date, i) => {
- const isFirstCol = i % 7 === 0;
- const iso = date ? toISOLocal(date) : null;
-
- const btnClass = () => {
- if (!date) return "";
- const val = typeof props.value === "function" ? props.value() : props.value;
- const isR = props.range() === "true" || props.range() === true;
- const sDate = isR ? val?.start : typeof val === "string" ? val : val?.start;
- const eDate = isR ? val?.end : null;
- const hDate = hoveredDate();
-
- const isSel = iso === sDate || iso === eDate;
- const tEnd = eDate || hDate;
- const inRange = isR && sDate && tEnd && !isSel && ((iso > sDate && iso < tEnd) || (iso < sDate && iso > tEnd));
-
- return `btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal rounded-md relative
- ${isSel ? "btn-primary !text-primary-content shadow-md" : "btn-ghost"}
- ${inRange ? "!bg-primary/20 !text-base-content" : ""}`;
- };
-
- return html`
- ${isFirstCol
- ? html`
-
- ${date ? getWeekNumber(date) : days()[i + 6] ? getWeekNumber(days()[i + 6]) : ""}
-
- `
- : ""}
- ${date
- ? html`
-
- `
- : html`
-
- `}
- `;
- })}
-
-
-
props.open()}
- @change=${(e) => {
- const isChecked = e.target.checked;
- if (typeof props.open === "function") props.open(isChecked);
- emit("change", isChecked);
- }} />
-
-
${slot("content")}
-
-
-
-
-
-
- ${slot()}
-
-
-
`btn btn-lg btn-circle btn-primary shadow-2xl ${props.ui() ?? ""}`}>
-
-
-
-
-
props.tooltip() ?? ""}>
-
-
- `;
- },
- ["label", "value", "icon", "tooltip", "ui", "place", "type"],
-);
diff --git a/packages/sigproui/components/Loading.js b/packages/sigproui/components/Loading.js
deleted file mode 100644
index a48c320..0000000
--- a/packages/sigproui/components/Loading.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { html } from "sigpro";
-
-export const loading = (show = true, msg = "Cargando...") => {
- const body = document.body;
-
- if (!show) {
- if (loadingEl) {
- loadingEl.classList.replace("opacity-100", "opacity-0");
- body.style.removeProperty("overflow"); // Restaurar scroll
-
- const elToRemove = loadingEl; // Captura para el closure
- elToRemove.addEventListener(
- "transitionend",
- () => {
- if (elToRemove === loadingEl) {
- // Solo si sigue siendo el actual
- elToRemove.remove();
- loadingEl = null;
- }
- },
- { once: true },
- );
- }
- return;
- }
-
- if (loadingEl?.isConnected) {
- loadingEl.querySelector(".loading-text").textContent = msg;
- return;
- }
-
- body.style.overflow = "hidden"; // Bloquear scroll
-
- loadingEl = html`
-
- `.firstElementChild;
-
- body.appendChild(loadingEl);
- requestAnimationFrame(() => loadingEl.classList.replace("opacity-0", "opacity-100"));
-};
diff --git a/packages/sigproui/components/Menu.js b/packages/sigproui/components/Menu.js
deleted file mode 100644
index 3afca26..0000000
--- a/packages/sigproui/components/Menu.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-menu",
- (props, { emit }) => {
- const getItems = () => props.items() || [];
-
- const renderItems = (data) => {
- return data.map((item) => {
- const hasChildren = item.sub && item.sub.length > 0;
- const content = html`
- ${item.icon
- ? html`
-
- `
- : ""}
- ${item.label}
- `;
-
- if (hasChildren) {
- return html`
-
-
- ${content}
-
- ${renderItems(item.sub)}
-
-
-
- `;
- }
-
- return html`
-
-
- ${content}
-
-
- `;
- });
- };
-
- return html`
- `menu bg-base-200 rounded-box w-full ${props.ui() ?? ""}`}>
- ${() => renderItems(getItems())}
-
- `;
- },
- ["items", "ui"],
-);
diff --git a/packages/sigproui/components/Radio.js b/packages/sigproui/components/Radio.js
deleted file mode 100644
index 90eadcd..0000000
--- a/packages/sigproui/components/Radio.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-radio",
- (props, { emit }) => {
- return html`
-
- `;
- },
- ["checked", "name", "label", "ui", "disabled", "value"],
-);
diff --git a/packages/sigproui/components/Range.js b/packages/sigproui/components/Range.js
deleted file mode 100644
index 849ba96..0000000
--- a/packages/sigproui/components/Range.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-range",
- (props, { emit }) => {
- return html`
- props.min() ?? 0}
- .max=${() => props.max() ?? 100}
- .step=${() => props.step() ?? 1}
- .value=${() => props.value()}
- .class=${() => `range ${props.ui() ?? ""}`}
- @input=${(e) => {
- const val = e.target.value;
- if (typeof props.value === "function") props.value(val);
-
- emit("input", val);
- emit("change", val);
- }} />
- `;
- },
- ["ui", "value", "min", "max", "step"],
-);
diff --git a/packages/sigproui/components/Rating.js b/packages/sigproui/components/Rating.js
deleted file mode 100644
index a4e7ccc..0000000
--- a/packages/sigproui/components/Rating.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-rating",
- (props, { emit }) => {
- const count = () => parseInt(props.count() ?? 5);
-
- const getVal = () => {
- const v = props.value();
- return v === false || v == null ? 0 : Number(v);
- };
-
- return html`
- `rating ${props.mask() ?? ""}`}>
- ${() =>
- Array.from({ length: count() }).map((_, i) => {
- const radioValue = i + 1;
- return html`
- props.name()}
- .class=${() => `mask ${props.mask() ?? "mask-star"}`}
- .checked=${() => getVal() === radioValue}
- @change=${() => {
- if (typeof props.value === "function") props.value(radioValue);
- emit("change", radioValue);
- }} />
- `;
- })}
-
- `;
- },
- ["value", "count", "name", "mask"],
-);
diff --git a/packages/sigproui/components/Tab.js b/packages/sigproui/components/Tab.js
deleted file mode 100644
index 71232c4..0000000
--- a/packages/sigproui/components/Tab.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { $, html } from "sigpro";
-
-$.component(
- "c-tab",
- (props, { emit, slot }) => {
- const groupName = `tab-group-${Math.random().toString(36).substring(2, 9)}`;
- const items = () => props.items() || [];
-
- return html`
- `tabs ${props.ui() ?? "tabs-lifted"}`}>
- ${() =>
- items().map(
- (item) => html`
- props.value() === item.value}
- @change=${() => {
- if (typeof props.value === "function") props.value(item.value);
- emit("change", item.value);
- }} />
-
- `,
- )}
-
- ${() => slot(props.value())}
- `;
- },
- ["items", "value", "ui"],
-);
diff --git a/packages/sigproui/components/Toast.js b/packages/sigproui/components/Toast.js
deleted file mode 100644
index a238ab1..0000000
--- a/packages/sigproui/components/Toast.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import { html } from "sigpro";
-
-let container = null;
-
-export const toast = (msg, type = "alert-success", ms = 3500) => {
- if (!container || !container.isConnected) {
- container = document.createElement("div");
- container.className = "fixed top-0 right-0 z-9999 p-6 flex flex-col gap-4 pointer-events-none items-end";
- document.body.appendChild(container);
- }
-
- const close = (n) => {
- if (!n || n._c) return;
- n._c = 1;
- Object.assign(n.style, { transform: "translateX(100%)", opacity: 0 });
-
- setTimeout(() => {
- Object.assign(n.style, { maxHeight: "0px", marginBottom: "-1rem", marginTop: "0px", padding: "0px" });
- }, 100);
-
- n.addEventListener("transitionend", (e) => {
- if (["max-height", "opacity"].includes(e.propertyName)) {
- n.remove();
- if (!container.hasChildNodes()) (container.remove(), (container = null));
- }
- });
- };
-
- const el = html`
-
- `.firstElementChild;
-
- container.appendChild(el);
- requestAnimationFrame(() => requestAnimationFrame(() => el.classList.remove("translate-x-full", "opacity-0")));
- setTimeout(() => close(el), ms);
-};
diff --git a/packages/sigproui/index.html b/packages/sigproui/index.html
deleted file mode 100644
index 01aaa4d..0000000
--- a/packages/sigproui/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
- SigProUI Test
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/sigproui/index.js b/packages/sigproui/index.js
deleted file mode 100644
index a3231d4..0000000
--- a/packages/sigproui/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-// index.js
-import "./sigproui.css";
-
-import "./components/Button.js";
-import "./components/Card.js";
-import "./components/Checkbox.js";
-import "./components/ColorPicker.js";
-import "./components/DatePicker.js";
-import "./components/Dialog.js";
-import "./components/Drawer.js";
-import "./components/Dropdown.js";
-import "./components/Fab.js";
-import "./components/Input.js";
-import "./components/Loading.js";
-import "./components/Menu.js";
-import "./components/Radio.js";
-import "./components/Range.js";
-import "./components/Rating.js";
-import "./components/Tab.js";
-import "./components/Toast.js";
-
-
-export { default as Button } from "./components/Button.js";
-export { default as Card } from "./components/Card.js";
-export { default as Checkbox } from "./components/Checkbox.js";
-export { default as ColorPicker } from "./components/ColorPicker.js";
-export { default as DatePicker } from "./components/DatePicker.js";
-export { default as Dialog } from "./components/Dialog.js";
-export { default as Drawer } from "./components/Drawer.js";
-export { default as Dropdown } from "./components/Dropdown.js";
-export { default as Fab } from "./components/Fab.js";
-export { default as Input } from "./components/Input.js";
-export { default as Loading } from "./components/Loading.js";
-export { default as Menu } from "./components/Menu.js";
-export { default as Radio } from "./components/Radio.js";
-export { default as Range } from "./components/Range.js";
-export { default as Rating } from "./components/Rating.js";
-export { default as Tab } from "./components/Tab.js";
-export { default as Toast } from "./components/Toast.js";
-
-export const components = [
- "Button",
- "Card",
- "Checkbox",
- "ColorPicker",
- "DatePicker",
- "Dialog",
- "Drawer",
- "Dropdown",
- "Fab",
- "Input",
- "Loading",
- "Menu",
- "Radio",
- "Range",
- "Rating",
- "Tab",
- "Toast",
-];
-
-// Exportar versión
-export const version = "1.0.0";
-export const name = "SigProUI";
-
-export default {
- version,
- name,
- description: "Biblioteca de componentes UI basada en SigPro, Tailwind CSS y DaisyUI",
- components,
-};
diff --git a/packages/sigproui/sigproui.css b/packages/sigproui/sigproui.css
deleted file mode 100644
index 67afa05..0000000
--- a/packages/sigproui/sigproui.css
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * SigProUI - Estilos de la biblioteca de componentes UI
- * Requiere Tailwind CSS y DaisyUI
- */
-
-/* Tailwind + DaisyUI */
-@import "tailwindcss";
-@plugin "daisyui" {
- themes: light --default, dark;
-}
-
-/* Utilidades personalizadas de SigProUI */
-.btn-ghost {
- border-color: transparent !important;
-}
-
-.floating-label > span {
- font-size: 1.1rem;
-}
-
-/* Transiciones para componentes */
-.input {
- transition: all 0.3s ease-in-out;
- outline: none;
- appearance: none;
- align-items: center;
-}
-
-.input:hover {
- background-color: var(--color-base-300);
-}
-
-/* Indicadores y badges */
-.indicator {
- position: relative;
-}
-
-.indicator-item {
- position: absolute;
- top: 0;
- right: 0;
- transform: translate(50%, -50%);
-}
-
-/* Tooltips */
-.tooltip {
- position: relative;
-}
-
-.tooltip::after {
- content: attr(data-tip);
- position: absolute;
- bottom: 100%;
- left: 50%;
- transform: translateX(-50%);
- padding: 0.5rem 1rem;
- background: oklch(var(--p));
- color: oklch(var(--pc));
- border-radius: 0.375rem;
- font-size: 0.75rem;
- white-space: nowrap;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.2s;
-}
-
-.tooltip:hover::after {
- opacity: 1;
-}
-
-/* Estados de carga */
-.loading {
- display: inline-block;
- width: 1rem;
- height: 1rem;
- border: 2px solid currentColor;
- border-right-color: transparent;
- border-radius: 50%;
- animation: spin 0.75s linear infinite;
-}
-
-.loading.loading-xs {
- width: 1rem;
- height: 1rem;
-}
-
-.loading.loading-sm {
- width: 1rem;
- height: 1rem;
-}
-
-.loading.loading-md {
- width: 1.5rem;
- height: 1.5rem;
-}
-
-.loading.loading-lg {
- width: 2.5rem;
- height: 2.5rem;
-}
-
-.hidden {
- display: none;
-}
-
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-/* Loading spinner variants */
-.loading-spinner {
- border-right-color: transparent;
-}
-
-.loading-dots::after {
- content: "";
- animation: dots 1s infinite;
-}
-
-@keyframes dots {
- 0%, 20% { content: "."; }
- 40% { content: ".."; }
- 60%, 100% { content: "..."; }
-}
-
-.loading-ring {
- border-bottom-color: transparent;
-}
-
-.loading-facebook::after {
- content: "";
- animation: facebook 1.5s infinite;
-}
-
-@keyframes facebook {
- 0% { transform: scale(0, 0.035); }
- 25% { transform: scale(0.035, 0.035); }
- 50% { transform: scale(0.035, 1); }
- 75% { transform: scale(1, 1); }
- 100% { transform: scale(1, 0.035); }
-}