From 68a1a1f1952db81bed809b9135f101529be51b44 Mon Sep 17 00:00:00 2001 From: natxocc Date: Fri, 20 Mar 2026 01:30:12 +0100 Subject: [PATCH] Only SigPro --- package.json | 13 +- packages/sigproui/app.js | 244 -------------------- packages/sigproui/components/Button.js | 31 --- packages/sigproui/components/Card.js | 26 --- packages/sigproui/components/Checkbox.js | 50 ---- packages/sigproui/components/ColorPicker.js | 65 ------ packages/sigproui/components/DatePicker.js | 168 -------------- packages/sigproui/components/Dialog.js | 37 --- packages/sigproui/components/Drawer.js | 31 --- packages/sigproui/components/Dropdown.js | 20 -- packages/sigproui/components/Fab.js | 37 --- packages/sigproui/components/Input.js | 26 --- packages/sigproui/components/Loading.js | 46 ---- packages/sigproui/components/Menu.js | 57 ----- packages/sigproui/components/Radio.js | 28 --- packages/sigproui/components/Range.js | 24 -- packages/sigproui/components/Rating.js | 34 --- packages/sigproui/components/Tab.js | 31 --- packages/sigproui/components/Toast.js | 49 ---- packages/sigproui/index.html | 25 -- packages/sigproui/index.js | 70 ------ packages/sigproui/sigproui.css | 146 ------------ 22 files changed, 3 insertions(+), 1255 deletions(-) delete mode 100644 packages/sigproui/app.js delete mode 100644 packages/sigproui/components/Button.js delete mode 100644 packages/sigproui/components/Card.js delete mode 100644 packages/sigproui/components/Checkbox.js delete mode 100644 packages/sigproui/components/ColorPicker.js delete mode 100644 packages/sigproui/components/DatePicker.js delete mode 100644 packages/sigproui/components/Dialog.js delete mode 100644 packages/sigproui/components/Drawer.js delete mode 100644 packages/sigproui/components/Dropdown.js delete mode 100644 packages/sigproui/components/Fab.js delete mode 100644 packages/sigproui/components/Input.js delete mode 100644 packages/sigproui/components/Loading.js delete mode 100644 packages/sigproui/components/Menu.js delete mode 100644 packages/sigproui/components/Radio.js delete mode 100644 packages/sigproui/components/Range.js delete mode 100644 packages/sigproui/components/Rating.js delete mode 100644 packages/sigproui/components/Tab.js delete mode 100644 packages/sigproui/components/Toast.js delete mode 100644 packages/sigproui/index.html delete mode 100644 packages/sigproui/index.js delete mode 100644 packages/sigproui/sigproui.css 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` -
-
-
- SigProUI Test -
-
- state.openDrawer(!state.openDrawer())}> - - -
-
- - - - - -
- - -
-

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 -
- -
- - -
-

Dropdown

- - Open Dropdown -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -     -
    - - -
    -

    FAB (Floating Action Button)

    - -
    - -
    -
    - `; -} - -// Mount the app -if (typeof document !== "undefined") { - const root = document.getElementById("app"); - if (root) { - root.appendChild(App()); - } -} diff --git a/packages/sigproui/components/Button.js b/packages/sigproui/components/Button.js deleted file mode 100644 index 7f9d4d3..0000000 --- a/packages/sigproui/components/Button.js +++ /dev/null @@ -1,31 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-button", - (props, { emit, slot }) => { - const spinner = () => html` - - `; - - return html` -
    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.alt() ?? -
    - ` - : null} - -
    -

    ${host.slot("title")}

    -
    ${host.slot("body")}
    -
    ${host.slot("actions")}
    -
    -
    - `; - }, - ["img", "alt", "ui"], -); diff --git a/packages/sigproui/components/Checkbox.js b/packages/sigproui/components/Checkbox.js deleted file mode 100644 index 52de975..0000000 --- a/packages/sigproui/components/Checkbox.js +++ /dev/null @@ -1,50 +0,0 @@ -import { $, html } from "sigpro"; - -const getVal = (props, key, def) => { - const v = props[key]; - if (v === undefined || v === null) return def; - if (typeof v === "function") { - try { - return v(); - } catch { - return def; - } - } - return v; -}; - -const toString = (val) => { - if (val === undefined || val === null) return ""; - return String(val); -}; - -$.component( - "c-check", - (props, { emit }) => { - const label = toString(getVal(props, "label", "")); - const disabled = getVal(props, "disabled", false); - const isToggle = getVal(props, "toggle", false); - - return html` - - `; - }, - ["label", "checked", "disabled", "toggle"], -); diff --git a/packages/sigproui/components/ColorPicker.js b/packages/sigproui/components/ColorPicker.js deleted file mode 100644 index 6b6d017..0000000 --- a/packages/sigproui/components/ColorPicker.js +++ /dev/null @@ -1,65 +0,0 @@ -import { $, html } from "sigpro"; - -const p1 = ["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"]; -const p2 = ["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"]; -const p3 = ["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"]; -const p4 = ["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"]; -const p5 = ["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"]; -const p6 = ["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"]; -const p7 = ["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"]; -const p8 = ["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"]; - -const palette = [...p1, ...p2, ...p3, ...p4, ...p5, ...p6, ...p7, ...p8]; - -$.component( - "c-colorpicker", - (props, { emit }) => { - const handleSelect = (c) => { - if (typeof props.color === "function") props.color(c); - emit("select", c); - }; - - const getColor = () => props.color() ?? "#000000"; - - return html` -
    -
    - ${() => - palette.map( - (c) => html` - - `, - )} -
    - -
    - props.color()} - @input=${(e) => handleSelect(e.target.value)} /> - -
    - -
    -
    -
    - `; - }, - ["color"], -); diff --git a/packages/sigproui/components/DatePicker.js b/packages/sigproui/components/DatePicker.js deleted file mode 100644 index 427fd6f..0000000 --- a/packages/sigproui/components/DatePicker.js +++ /dev/null @@ -1,168 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-datepicker", - (props, { emit }) => { - const viewDate = $(new Date()); - const hoveredDate = $(null); - const todayISO = new Date().toLocaleDateString("en-CA"); - - const toISOLocal = (date) => { - if (!date) return null; - return date.toISOString().split("T")[0]; - }; - - // Función unificada para navegar tiempo - const navigate = (type, offset) => { - hoveredDate(null); - const d = viewDate(); - if (type === "month") { - viewDate(new Date(d.getFullYear(), d.getMonth() + offset, 1)); - } else if (type === "year") { - viewDate(new Date(d.getFullYear() + offset, d.getMonth(), 1)); - } - }; - - const selectDate = (dateObj) => { - const isoDate = toISOLocal(dateObj); - const isRange = props.range() === "true" || props.range() === true; - const currentVal = typeof props.value === "function" ? props.value() : props.value; - - let result; - if (!isRange) { - result = isoDate; - } else { - const s = currentVal?.start || null; - const e = currentVal?.end || null; - if (!s || (s && e)) { - result = { start: isoDate, end: null }; - } else { - result = isoDate < s ? { start: isoDate, end: s } : { start: s, end: isoDate }; - } - } - - if (typeof props.value === "function") { - props.value(isRange ? { ...result } : result); - } - emit("change", result); - }; - - const handleGridClick = (e) => { - const btn = e.target.closest("button[data-date]"); - if (!btn) return; - selectDate(new Date(btn.getAttribute("data-date"))); - }; - - const days = $(() => { - const d = viewDate(); - const year = d.getFullYear(); - const month = d.getMonth(); - const firstDay = new Date(year, month, 1).getDay(); - const offset = firstDay === 0 ? 6 : firstDay - 1; - const total = new Date(year, month + 1, 0).getDate(); - let grid = Array(offset).fill(null); - for (let i = 1; i <= total; i++) grid.push(new Date(year, month, i)); - return grid; - }); - - const getWeekNumber = (d) => { - const t = new Date(d.valueOf()); - t.setDate(t.getDate() - ((d.getDay() + 6) % 7) + 3); - const firstThurs = t.valueOf(); - t.setMonth(0, 1); - if (t.getDay() !== 4) t.setMonth(0, 1 + ((4 - t.getDay() + 7) % 7)); - return 1 + Math.ceil((firstThurs - t.getTime()) / 604800000); - }; - - return html` -
    -
    -
    - - -
    - - - ${() => 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` -
    - `} - `; - })} -
    -
    - `; - }, - ["range", "value"], -); diff --git a/packages/sigproui/components/Dialog.js b/packages/sigproui/components/Dialog.js deleted file mode 100644 index 387a7f9..0000000 --- a/packages/sigproui/components/Dialog.js +++ /dev/null @@ -1,37 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-dialog", - (props, { slot, emit }) => { - return html` - `modal ${props.open() ? "modal-open" : ""}`} - .open=${() => props.open()} - @close=${(e) => { - if (typeof props.open === "function") props.open(false); - emit("close", e); - }}> -
    -
    ${slot()}
    - -
    -
    props.open(false)}> - ${slot("buttons")} - ${() => - !slot("buttons").length - ? html` - - ` - : ""} -
    -
    -
    - -
    props.open(false)}> - -
    -     - `; - }, - ["open"], -); diff --git a/packages/sigproui/components/Drawer.js b/packages/sigproui/components/Drawer.js deleted file mode 100644 index 9716bb3..0000000 --- a/packages/sigproui/components/Drawer.js +++ /dev/null @@ -1,31 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-drawer", - (props, { emit, slot }) => { - const id = `drawer-${Math.random().toString(36).substring(2, 9)}`; - - return html` -
    - props.open()} - @change=${(e) => { - const isChecked = e.target.checked; - if (typeof props.open === "function") props.open(isChecked); - emit("change", isChecked); - }} /> - -
    ${slot("content")}
    - -
    - -
    ${slot()}
    -
    -
    - `; - }, - ["open"], -); diff --git a/packages/sigproui/components/Dropdown.js b/packages/sigproui/components/Dropdown.js deleted file mode 100644 index 2b3b83a..0000000 --- a/packages/sigproui/components/Dropdown.js +++ /dev/null @@ -1,20 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-dropdown", - (props, { slot }) => { - // Generamos un ID único para el anclaje nativo - const id = props.id() ?? `pop-${Math.random().toString(36).slice(2, 7)}`; - - return html` -
    - - - -
    - `; - }, - ["id"], -); diff --git a/packages/sigproui/components/Fab.js b/packages/sigproui/components/Fab.js deleted file mode 100644 index 159d772..0000000 --- a/packages/sigproui/components/Fab.js +++ /dev/null @@ -1,37 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-fab", - (props, { emit }) => { - const handleClick = (e, item) => { - if (item.onclick) item.onclick(e); - emit("select", item); - if (document.activeElement instanceof HTMLElement) document.activeElement.blur(); - }; - - return html` -
    -
    `btn btn-lg btn-circle btn-primary shadow-2xl ${props.ui() ?? ""}`}> - -
    - - -
    - `; - }, - ["main-icon", "actions", "ui"], -); diff --git a/packages/sigproui/components/Input.js b/packages/sigproui/components/Input.js deleted file mode 100644 index f1848a7..0000000 --- a/packages/sigproui/components/Input.js +++ /dev/null @@ -1,26 +0,0 @@ -import { $, html } from "sigpro"; - -$.component( - "c-input", - (props, { slot, emit }) => { - return html` -
    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` -
    -
    - - ${msg} -
    -
    - `.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` - - `; - }, - ["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); } -}