prepare to use sigproui

UI/App.js

@@ -1,79 +0,0 @@
-import { html, $ } from "sigpro";
-import buttonsPage from "./pages/buttons.js";
-import inputPage from "./pages/input.js";
-import checkboxPage from "./pages/checkbox.js";
-import "@components/Drawer.js";
-import "@components/Menu.js";
-
-// Configuración de rutas
-const routes = [
-  { path: "/", component: () => buttonsPage() },
-  { path: "/buttons", component: () => buttonsPage() },
-  { path: "/input", component: () => inputPage() },
-  { path: "/checkbox", component: () => checkboxPage() },
-];
-
-export default function App() {
-  const openMenu = $(false);
-
-  const menuConfig = [
-    { label: "Buttons", icon: "icon-[lucide--square]", href: "#/buttons" },
-    {
-      label: "Forms",
-      icon: "icon-[lucide--form-input]",
-      open: false,
-      sub: [
-        { label: "Input", href: "#/input" },
-        { label: "Checkbox", href: "#/checkbox" },
-        { label: "Radio", href: "#/radio" },
-        { label: "Range", href: "#/range" },
-        { label: "Rating", href: "#/rating" },
-        { label: "Color Picker", href: "#/colorpicker" },
-        { label: "Date Picker", href: "#/datepicker" },
-      ],
-    },
-    {
-      label: "Display",
-      icon: "icon-[lucide--layout]",
-      open: false,
-      sub: [
-        { label: "Card", href: "#/card" },
-        { label: "Tabs", href: "#/tabs" },
-        { label: "Loading", href: "#/loading" },
-      ],
-    },
-    {
-      label: "Feedback",
-      icon: "icon-[lucide--message-circle]",
-      open: false,
-      sub: [
-        { label: "Toast", href: "#/toast" },
-        { label: "Dialog", href: "#/dialog" },
-        { label: "FAB", href: "#/fab" },
-        { label: "Dropdown", href: "#/dropdown" },
-      ],
-    },
-    { label: "About", icon: "icon-[lucide--info]", href: "#/about" },
-  ];
-
-  return html`
-    <div class="min-h-screen bg-base-100 text-base-content transition-colors duration-300">
-      <header class="navbar bg-base-200 justify-between shadow-xl px-4">
-        <div class="flex items-center gap-2">
-          <button class="btn btn-ghost" @click=${() => openMenu(!openMenu())}>
-            <span class="icon-[lucide--menu] size-5"></span>
-          </button>
-          <span class="font-bold text-lg">SigProUI</span>
-        </div>
-      </header>
-
-      <c-drawer .open=${openMenu} @change=${(e) => openMenu(false)}>
-        <c-menu cls="menu-lg" .items=${menuConfig} @select=${() => openMenu(false)}></c-menu>
-      </c-drawer>
-
-      <main class="p-4 flex flex-col gap-4 mx-auto w-full max-w-7xl">
-        <div class="p-4 bg-base-100 rounded-box shadow-sm">${$.router(routes)}</div>
-      </main>
-    </div>
-  `;
-}

UI/app.css

@@ -1,38 +0,0 @@
-@import "tailwindcss";
-@plugin "@iconify/tailwind4";
-@plugin "daisyui" {
-  themes:
-    light --default,
-    dark --prefersdark;
-  include:
-    alert, avatar, badge, button, card, checkbox, collapse, drawer, dropdown, fab, fieldset, loading, indicator, input, kbd, label, list, menu, modal,
-    navbar, radio, range, select, skeleton, tab, textarea, toast, toggle, tooltip, validator, rating, mask;
-}
-
-@font-face {
-  font-family: "Plus Jakarta Sans";
-  src: url("/jakarta.woff2") format("woff2");
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-
-:root {
-  font-size: 14px;
-  /* font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; */
-}
-
-.btn-ghost {
-  border-color: transparent !important;
-}
-
-.floating-label > span {
-  font-size: 1.1rem;
-}
-
-@utility input {
-  @apply transition-all duration-300 ease-in-out outline-none shrink appearance-none items-center;
-  &:hover {
-    background-color: var(--color-base-300);
-  }
-}

UI/index.js

@@ -1,12 +1,6 @@
-/**
+// index.js
- * SigProUI - Biblioteca de componentes UI basada en SigPro, Tailwind CSS y DaisyUI
- * @version 1.0.0
- */
-
-// Importar estilos de la librería
 import "./sigproui.css";
 
-// Importar todos los componentes para registrarlos automáticamente
 import "./components/Button.js";
 import "./components/Card.js";
 import "./components/Checkbox.js";
@@ -25,13 +19,51 @@ 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";
 
-// Exportar información de la librería
 export default {
   version,
   name,
   description: "Biblioteca de componentes UI basada en SigPro, Tailwind CSS y DaisyUI",
+  components,
 };

UI/main.js

@@ -1,15 +0,0 @@
-import App from "./App.js";
-import "./app.css";
-import "./daisyui.css";
-const root = document.getElementById("app");
-root.appendChild(App());
-
-if (import.meta.hot) {
-  import.meta.hot.accept("./App.js", (newModule) => {
-    if (newModule) {
-      root.innerHTML = "";
-      root.appendChild(newModule.default());
-      console.log("🚀 SigPro: App re-renderizada");
-    }
-  });
-}

index.js

@@ -8,7 +8,11 @@ export * from './sigpro.js';
 import sigproRouter from './sigpro-router-plugin.js';
 export { sigproRouter };
 
-// 3. Default export for the global namespace (optional)
+// 3. Re-export UI components
-// Combines core logic and the router plugin into a single object
+// Users can import components like: import { Button, Input, Card } from 'sigpro';
+export * from './UI/index.js';
+
+// 4. Default export for the global namespace (optional)
+// Combines core logic, router plugin, and UI components into a single object
 import * as sigpro from './sigpro.js';
 export default { ...sigpro, sigproRouter };