Update Readme.md

Readme.md

@@ -1,6 +1,8 @@
-# SigPro UI (W.I.P.)
+# 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**.
+**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 with **zero external dependencies** - everything is included.
+
+**SigPro UI** is a complete, self-contained UI library + reactive core in under **45KB gzip** (<15KB JS + <30KB CSS). 🎉
 
 Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, allowing you to build complex reactive interfaces with a functional, declarative syntax that runs natively in the browser.
 
@@ -8,96 +10,73 @@ Unlike heavy frameworks, SigPro UI focuses on a **"Zero-Build"** philosophy, all
 
 ## Features
 
-* **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates.
+- **Signals-Based Reactivity**: Powered by SigPro for granular DOM updates
-* **DaisyUI v5 Integration**: Beautiful, semantic components out of the box.
+- **Self-Contained Styling**: Full CSS included - no external frameworks needed
-* **Tree Shaking Ready**: Import only what you need.
+- **Built on daisyUI v5**: Modern, utility-first styling out of the box
-* **Zero-Import Option**: Inject all components into the global scope with one command.
+- **Tree Shaking Ready**: Import only what you need
-* **Lightweight**: Minimal footprint with a focus on performance.
+- **Zero-Import Option**: Inject all components into the global scope with one command
+- **Lightweight**: Minimal footprint with everything bundled
 
 ---
 
-## Prerequisites
+## Installation
 
-To use SigPro UI, your project must include:
+### Via NPM
 
-1.  **SigPro Core**: `npm install sigpro` (or via CDN).
+```bash
-2.  **Tailwind CSS v4**: For utility-first styling.
-3.  **daisyUI v5**: The component engine for Tailwind.
-
-
-## 1. Prerequisites & Installation
-SigPro UI is built as an extension of the SigPro reactivity system. You need to install the core library first.
-
-### Step 1: Install SigPro Core
-
-```Bash
-bun add sigpro
-# or
-npm install sigpro
-```
-
-### Step 2: Install SigPro UI
-
-```Bash
-bun add sigpro-ui
-# or
 npm install sigpro-ui
 ```
 
 ### Via CDN (Browser)
 
 ```html
-<script src="https://unpkg.com/sigpro"></script>
+<!-- SigPro UI with styles included -->
 <script src="https://unpkg.com/sigpro-ui"></script>
+<link href="https://unpkg.com/sigpro-ui/css" rel="stylesheet">
 ```
+
+**That's it!** No additional CSS files, no configuration, no build step. SigPro core is included internally.
+
 ---
 
-## 2. Styling Setup (Tailwind CSS v4)
+## Usage
-SigPro UI components rely on **Tailwind CSS** and **daisyUI** for styling. You don't need a complex tailwind.config.js; simply configure your main CSS entry point.
 
-Create or edit your global CSS file (e.g., style.css):
+You can use SigPro UI in two ways: **Modular** (Recommended) or **Global** (Fastest for prototyping).
-
-```css
-/* src/style.css */
-@import "tailwindcss";
-@plugin "daisyui";
-
-/* Optional: Your custom theme overrides */
-:root {
-  --primary: #570df8;
-  --secondary: #f000b8;
-}
-```
----
-## Setup & Usage
-
-You can use SigPro UI in two ways: **Modular** (Recommended for production) or **Global** (Fastest for prototyping).
 
 ### 1. Modular Approach (Tree Shaking)
-Import only the components you need. This keeps your bundle small.
+
+Import only the components you need:
 
 ```javascript
-import { $, $mount } from "sigpro";
+import { $, $mount, Button, Modal, Input, Alert } from "sigpro-ui";
-import { Button, Modal, Table } from "sigpro-ui";
+import "sigpro-ui/css";
 
 const App = () => {
   const show = $(false);
-  return Button({ onclick: () => show(true) }, "Open Modal");
+  
+  return Button(
+    { 
+      class: "btn-primary", 
+      onclick: () => show(true) 
+    }, 
+    "Open Modal"
+  );
 };
 
 $mount(App, "#app");
 ```
 
 ### 2. Global Approach (Zero-Import)
-Inject all components and utilities into the `window` object. This makes all components available everywhere without manual imports.
+
+Inject all components into the `window` object:
 
 ```javascript
-import SigproUI from "sigpro-ui";
+import "sigpro-ui";
+import "sigpro-ui/css";
 
-// Injects Button, Table, Input, Icons, Utils, etc. into window
+// All components (Button, Table, Input, Alert, etc.) are now globally available.
-SigproUI.install(); 
+// No need to import anything else!
 
-// Now you can use them directly anywhere:
 const myApp = () => Table({ items: [], columns: [] });
 ```
 
@@ -106,8 +85,8 @@ const myApp = () => Table({ items: [], columns: [] });
 ## Basic Example
 
 ```javascript
-import { $ } from "sigpro";
+import { $, $mount, Button, Toast, Div, H1 } from "sigpro-ui";
-import { Button, Toast, Div, H1 } from "sigpro-ui";
+import "sigpro-ui/css";
 
 const App = () => {
   const count = $(0);
@@ -124,23 +103,57 @@ const App = () => {
     }, () => `Clicks: ${count()}`)
   ]);
 };
+
+$mount(App, "#app");
 ```
 
 ---
 
-## Components Included
+## What's Included?
 
-| Category | Components |
+### Core Functions (from SigPro)
-| :--- | :--- |
+- `$()` - Reactive signals
-| **Form** | `Input`, `Select`, `Checkbox`, `Radio`, `Range`, `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating` |
+- `$watch()` - Watch reactive dependencies
-| **Data** | `Table`, `List`, `Stat`, `Timeline`, `Badge`, `Indicator` |
+- `$html()` - Create HTML elements with reactivity
-| **Layout** | `Navbar`, `Menu`, `Drawer`, `Fieldset`, `Stack`, `Tabs`, `Accordion` |
+- `$if()` - Conditional rendering
-| **Feedback** | `Alert`, `Modal`, `Toast`, `Loading`, `Tooltip` |
+- `$for()` - List rendering
-| **Interaction** | `Button`, `Dropdown`, `Swap`, `Fab` |
+- `$router()` - Hash-based routing
+- `$mount()` - Mount components to DOM
+
+Explore [SigPro Core Docs](https://natxocc.github.io/sigpro/#/) for more information.
+
+### UI Components
+- `Button`, `Input`, `Select`, `Checkbox`, `Radio`
+- `Modal`, `Alert`, `Toast`, `Tooltip`
+- `Table`, `List`, `Badge`, `Stat`, `Timeline`
+- `Tabs`, `Accordion`, `Dropdown`, `Drawer`
+- `Datepicker`, `Colorpicker`, `Autocomplete`, `Rating`
+- `Fileinput`, `Fab`, `Swap`, `Indicator`
+- And 30+ more!
+
+### Utilities
+- `tt()` - i18n translation function (ES/EN)
+- `Locale()` - Set global language
+
+---
+
+## Language Support
+
+Built-in i18n with Spanish and English:
+
+```javascript
+import { tt, Locale } from "sigpro-ui";
+
+// Change locale (default is 'es')
+Locale('en');
+
+// Use translations
+const closeButton = Button({}, tt('close')());
+```
 
 ---
 
 ## License
 
-MIT © 2026 **SigPro Team**.
+MIT © 2026 **SigPro Team**  
 *Engineered for speed, designed for clarity, built for the modern web.*

dist/sigpro-ui.js

@@ -473,57 +473,7 @@
     install(SigProCore);
   }
 
-  // src/components/index.js
-  var exports_components = {};
-  __export(exports_components, {
-    default: () => components_default,
-    Tooltip: () => Tooltip,
-    Toast: () => Toast,
-    Timeline: () => Timeline,
-    Tabs: () => Tabs,
-    Table: () => Table,
-    Swap: () => Swap,
-    Stat: () => Stat,
-    Stack: () => Stack,
-    Select: () => Select,
-    Rating: () => Rating,
-    Range: () => Range,
-    Radio: () => Radio,
-    Navbar: () => Navbar,
-    Modal: () => Modal,
-    Menu: () => Menu,
-    List: () => List,
-    Label: () => Label,
-    Input: () => Input,
-    Indicator: () => Indicator,
-    Fileinput: () => Fileinput,
-    Fieldset: () => Fieldset,
-    Fab: () => Fab,
-    Dropdown: () => Dropdown,
-    Drawer: () => Drawer,
-    Datepicker: () => Datepicker,
-    Colorpicker: () => Colorpicker,
-    Checkbox: () => Checkbox,
-    Button: () => Button,
-    Badge: () => Badge,
-    Autocomplete: () => Autocomplete,
-    Alert: () => Alert,
-    Accordion: () => Accordion
-  });
-
-  // src/components/Accordion.js
-  var exports_Accordion = {};
-  __export(exports_Accordion, {
-    Accordion: () => Accordion
-  });
-
   // src/core/utils.js
-  var exports_utils = {};
-  __export(exports_utils, {
-    val: () => val,
-    ui: () => ui,
-    getIcon: () => getIcon
-  });
   var val = (t) => typeof t === "function" ? t() : t;
   var ui = (baseClass, additionalClassOrFn) => typeof additionalClassOrFn === "function" ? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim() : `${baseClass} ${additionalClassOrFn || ""}`.trim();
   var getIcon = (icon) => {
@@ -566,10 +516,6 @@
   };
 
   // src/components/Alert.js
-  var exports_Alert = {};
-  __export(exports_Alert, {
-    Alert: () => Alert
-  });
   var Alert = (props, children) => {
     const { class: className, actions, type = "info", soft = true, ...rest } = props;
     const iconMap = {
@@ -597,12 +543,6 @@
     ].filter(Boolean));
   };
 
-  // src/components/Autocomplete.js
-  var exports_Autocomplete = {};
-  __export(exports_Autocomplete, {
-    Autocomplete: () => Autocomplete
-  });
-
   // src/core/i18n.js
   var i18n = {
     es: {
@@ -626,10 +566,6 @@
   var tt = (t) => () => i18n[currentLocale()][t] || t;
 
   // src/components/Input.js
-  var exports_Input = {};
-  __export(exports_Input, {
-    Input: () => Input
-  });
   var Input = (props) => {
     const {
       class: className,
@@ -788,10 +724,6 @@
   };
 
   // src/components/Badge.js
-  var exports_Badge = {};
-  __export(exports_Badge, {
-    Badge: () => Badge
-  });
   var Badge = (props, children) => {
     const { class: className, ...rest } = props;
     return $html2("span", {
@@ -801,10 +733,6 @@
   };
 
   // src/components/Button.js
-  var exports_Button = {};
-  __export(exports_Button, {
-    Button: () => Button
-  });
   var Button = (props, children) => {
     const { class: className, loading, icon, ...rest } = props;
     const iconEl = getIcon(icon);
@@ -820,10 +748,6 @@
   };
 
   // src/components/Checkbox.js
-  var exports_Checkbox = {};
-  __export(exports_Checkbox, {
-    Checkbox: () => Checkbox
-  });
   var Checkbox = (props) => {
     const { class: className, value, tooltip, toggle, label, ...rest } = props;
     const checkEl = $html2("input", {
@@ -840,10 +764,6 @@
   };
 
   // src/components/Colorpicker.js
-  var exports_Colorpicker = {};
-  __export(exports_Colorpicker, {
-    Colorpicker: () => Colorpicker
-  });
   var Colorpicker = (props) => {
     const { class: className, value, label, ...rest } = props;
     const isOpen = $(false);
@@ -901,10 +821,6 @@
   };
 
   // src/components/Datepicker.js
-  var exports_Datepicker = {};
-  __export(exports_Datepicker, {
-    Datepicker: () => Datepicker
-  });
   var Datepicker = (props) => {
     const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
     const isOpen = $(false);
@@ -1111,10 +1027,6 @@
   };
 
   // src/components/Drawer.js
-  var exports_Drawer = {};
-  __export(exports_Drawer, {
-    Drawer: () => Drawer
-  });
   var Drawer = (props, children) => {
     const { class: className, id, open, side, content, ...rest } = props;
     const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
@@ -1152,10 +1064,6 @@
   };
 
   // src/components/Dropdown.js
-  var exports_Dropdown = {};
-  __export(exports_Dropdown, {
-    Dropdown: () => Dropdown
-  });
   var currentOpen = null;
   if (typeof window !== "undefined" && !window.__dropdownHandlerRegistered) {
     window.addEventListener("click", (e) => {
@@ -1218,10 +1126,6 @@
   };
 
   // src/components/Fab.js
-  var exports_Fab = {};
-  __export(exports_Fab, {
-    Fab: () => Fab
-  });
   var Fab = (props) => {
     const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
     return $html2("div", {
@@ -1251,10 +1155,6 @@
   };
 
   // src/components/Fieldset.js
-  var exports_Fieldset = {};
-  __export(exports_Fieldset, {
-    Fieldset: () => Fieldset
-  });
   var Fieldset = (props, children) => {
     const { class: className, legend, ...rest } = props;
     return $html2("fieldset", {
@@ -1270,10 +1170,6 @@
   };
 
   // src/components/Fileinput.js
-  var exports_Fileinput = {};
-  __export(exports_Fileinput, {
-    Fileinput: () => Fileinput
-  });
   var Fileinput = (props) => {
     const { class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
     const selectedFiles = $([]);
@@ -1356,10 +1252,6 @@
   };
 
   // src/components/Indicator.js
-  var exports_Indicator = {};
-  __export(exports_Indicator, {
-    Indicator: () => Indicator
-  });
   var Indicator = (props, children) => {
     const { value, class: className, ...rest } = props;
     return $html2("div", {
@@ -1374,10 +1266,6 @@
   };
 
   // src/components/Label.js
-  var exports_Label = {};
-  __export(exports_Label, {
-    Label: () => Label
-  });
   var Label = (props) => {
     const { children, value, floating = false, error, required, class: className, ...rest } = props;
     if (floating) {
@@ -1395,10 +1283,6 @@
   };
 
   // src/components/List.js
-  var exports_List = {};
-  __export(exports_List, {
-    List: () => List
-  });
   var List = (props) => {
     const { class: className, items, header, render, keyFn = (item, index) => item.id ?? index, ...rest } = props;
     const listItems = $for(items, (item, index) => $html2("li", { class: "list-row" }, [render(item, index)]), keyFn);
@@ -1409,10 +1293,6 @@
   };
 
   // src/components/Menu.js
-  var exports_Menu = {};
-  __export(exports_Menu, {
-    Menu: () => Menu
-  });
   var Menu = (props) => {
     const { class: className, items, ...rest } = props;
     const renderItems = (items2) => $for(() => items2 || [], (it) => $html2("li", {}, [
@@ -1428,10 +1308,6 @@
   };
 
   // src/components/Modal.js
-  var exports_Modal = {};
-  __export(exports_Modal, {
-    Modal: () => Modal
-  });
   var Modal = (props, children) => {
     const { class: className, title, buttons, open, ...rest } = props;
     let dialogElement = null;
@@ -1482,20 +1358,12 @@
   };
 
   // src/components/Navbar.js
-  var exports_Navbar = {};
-  __export(exports_Navbar, {
-    Navbar: () => Navbar
-  });
   var Navbar = (props, children) => {
     const { class: className, ...rest } = props;
     return $html2("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children);
   };
 
   // src/components/Radio.js
-  var exports_Radio = {};
-  __export(exports_Radio, {
-    Radio: () => Radio
-  });
   var Radio = (props) => {
     const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
     const radioEl = $html2("input", {
@@ -1519,10 +1387,6 @@
   };
 
   // src/components/Range.js
-  var exports_Range = {};
-  __export(exports_Range, {
-    Range: () => Range
-  });
   var Range = (props) => {
     const { class: className, label, tooltip, value, ...rest } = props;
     const rangeEl = $html2("input", {
@@ -1542,10 +1406,6 @@
   };
 
   // src/components/Rating.js
-  var exports_Rating = {};
-  __export(exports_Rating, {
-    Rating: () => Rating
-  });
   var Rating = (props) => {
     const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
     const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
@@ -1573,10 +1433,6 @@
   };
 
   // src/components/Select.js
-  var exports_Select = {};
-  __export(exports_Select, {
-    Select: () => Select
-  });
   var Select = (props) => {
     const { class: className, label, items, value, ...rest } = props;
     const selectEl = $html2("select", {
@@ -1596,20 +1452,12 @@
   };
 
   // src/components/Stack.js
-  var exports_Stack = {};
-  __export(exports_Stack, {
-    Stack: () => Stack
-  });
   var Stack = (props, children) => {
     const { class: className, ...rest } = props;
     return $html2("div", { ...rest, class: ui("stack", className) }, children);
   };
 
   // src/components/Stat.js
-  var exports_Stat = {};
-  __export(exports_Stat, {
-    Stat: () => Stat
-  });
   var Stat = (props) => {
     const { class: className, icon, label, value, desc, ...rest } = props;
     return $html2("div", { ...rest, class: ui("stat", className) }, [
@@ -1621,10 +1469,6 @@
   };
 
   // src/components/Swap.js
-  var exports_Swap = {};
-  __export(exports_Swap, {
-    Swap: () => Swap
-  });
   var Swap = (props) => {
     const { class: className, value, on, off, ...rest } = props;
     return $html2("label", { ...rest, class: ui("swap", className) }, [
@@ -1643,10 +1487,6 @@
   };
 
   // src/components/Table.js
-  var exports_Table = {};
-  __export(exports_Table, {
-    Table: () => Table
-  });
   var Table = (props) => {
     const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
     const tableClass = () => {
@@ -1688,10 +1528,6 @@
   };
 
   // src/components/Tabs.js
-  var exports_Tabs = {};
-  __export(exports_Tabs, {
-    Tabs: () => Tabs
-  });
   var Tabs = (props) => {
     const { items, class: className, ...rest } = props;
     const itemsSignal = typeof items === "function" ? items : () => items || [];
@@ -1748,10 +1584,6 @@
   };
 
   // src/components/Timeline.js
-  var exports_Timeline = {};
-  __export(exports_Timeline, {
-    Timeline: () => Timeline
-  });
   var Timeline = (props) => {
     const { class: className, items = [], vertical = true, compact = false, ...rest } = props;
     const iconMap = {
@@ -1786,10 +1618,6 @@
   };
 
   // src/components/Toast.js
-  var exports_Toast = {};
-  __export(exports_Toast, {
-    Toast: () => Toast
-  });
   var Toast = (message, type = "alert-success", duration = 3500) => {
     let container = document.getElementById("sigpro-toast-container");
     if (!container) {
@@ -1840,68 +1668,9 @@
   };
 
   // src/components/Tooltip.js
-  var exports_Tooltip = {};
-  __export(exports_Tooltip, {
-    Tooltip: () => Tooltip
-  });
   var Tooltip = (props, children) => $html2("div", {
     ...props,
     class: () => ui("tooltip", props.ui, props.class),
     "data-tip": props.tip
   }, children);
-
-  // src/components/index.js
-  var Components = {
-    ...exports_Accordion,
-    ...exports_Alert,
-    ...exports_Autocomplete,
-    ...exports_Badge,
-    ...exports_Button,
-    ...exports_Checkbox,
-    ...exports_Colorpicker,
-    ...exports_Datepicker,
-    ...exports_Drawer,
-    ...exports_Dropdown,
-    ...exports_Fab,
-    ...exports_Fieldset,
-    ...exports_Fileinput,
-    ...exports_Indicator,
-    ...exports_Input,
-    ...exports_Label,
-    ...exports_List,
-    ...exports_Menu,
-    ...exports_Modal,
-    ...exports_Navbar,
-    ...exports_Radio,
-    ...exports_Range,
-    ...exports_Rating,
-    ...exports_Select,
-    ...exports_Stack,
-    ...exports_Stat,
-    ...exports_Swap,
-    ...exports_Table,
-    ...exports_Tabs,
-    ...exports_Timeline,
-    ...exports_Toast,
-    ...exports_Tooltip
-  };
-  var components_default = {
-    ...Components,
-    install: (target = window) => {
-      Object.entries(Components).forEach(([name, component]) => {
-        target[name] = component;
-      });
-      console.log("\uD83D\uDE80 SigproUI");
-    }
-  };
-  // index.js
-  if (typeof window !== "undefined") {
-    Object.entries(exports_components).forEach(([name, component]) => {
-      window[name] = component;
-    });
-    window.Utils = exports_utils;
-    window.tt = tt;
-    window.SigProUI = { ...exports_components, Utils: exports_utils, tt };
-    console.log("\uD83C\uDFA8 SigProUI ready");
-  }
 })();

index.d.ts

@@ -0,0 +1,498 @@
+// sigpro-ui.d.ts
+
+declare module 'sigpro-ui' {
+  // Tipos básicos
+  type Signal<T> = {
+    (): T;
+    (value: T | ((prev: T) => T)): void;
+  };
+
+  type ComponentFunction<P = {}> = (props?: P, children?: any) => HTMLElement | string | null;
+  type ComponentChild = HTMLElement | string | number | boolean | null | undefined;
+  type ComponentChildren = ComponentChild | ComponentChild[];
+
+  // Utils
+  function val<T>(value: T | (() => T)): T;
+  function ui(baseClass: string, ...additional: (string | (() => string) | undefined)[]): string | (() => string);
+  function getIcon(icon: string | (() => string) | HTMLElement | null | undefined): HTMLElement | null;
+  function tt(key: 'close' | 'confirm' | 'cancel' | 'search' | 'loading' | 'nodata'): () => string;
+
+  // Props comunes
+  interface BaseProps {
+    class?: string | (() => string);
+    style?: string | Record<string, string> | (() => string | Record<string, string>);
+    id?: string | (() => string);
+  }
+
+  interface EventProps {
+    onclick?: (event: MouseEvent) => void;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onblur?: (event: FocusEvent) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onkeydown?: (event: KeyboardEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    onmouseleave?: (event: MouseEvent) => void;
+    onsubmit?: (event: Event) => void;
+    ondragover?: (event: DragEvent) => void;
+    ondragleave?: (event: DragEvent) => void;
+    ondrop?: (event: DragEvent) => void;
+    [key: `on${string}`]: ((event: any) => void) | undefined;
+  }
+
+  // Accordion
+  interface AccordionProps extends BaseProps, EventProps {
+    title: string | (() => string);
+    name?: string;
+    open?: boolean | (() => boolean);
+  }
+  function Accordion(props: AccordionProps, children: ComponentChildren): HTMLElement;
+
+  // Alert
+  type AlertType = 'info' | 'success' | 'warning' | 'error';
+  interface AlertProps extends BaseProps, EventProps {
+    type?: AlertType;
+    soft?: boolean;
+    actions?: ComponentFunction | ComponentChildren;
+    message?: string | (() => string);
+  }
+  function Alert(props: AlertProps, children?: ComponentChildren): HTMLElement;
+
+  // Autocomplete
+  interface AutocompleteOption {
+    label: string;
+    value: string;
+  }
+  interface AutocompleteProps extends BaseProps, EventProps {
+    items?: string[] | AutocompleteOption[] | (() => (string[] | AutocompleteOption[]));
+    value?: Signal<string> | string;
+    onSelect?: (option: string | AutocompleteOption) => void;
+    label?: string | (() => string);
+    placeholder?: string | (() => string);
+  }
+  function Autocomplete(props: AutocompleteProps): HTMLElement;
+
+  // Badge
+  interface BadgeProps extends BaseProps, EventProps {}
+  function Badge(props: BadgeProps, children: ComponentChildren): HTMLElement;
+
+  // Button
+  interface ButtonProps extends BaseProps, EventProps {
+    disabled?: boolean | (() => boolean);
+    loading?: boolean | (() => boolean);
+    icon?: string | (() => string) | HTMLElement;
+  }
+  function Button(props: ButtonProps, children: ComponentChildren): HTMLElement;
+
+  // Checkbox
+  interface CheckboxProps extends BaseProps, EventProps {
+    value?: Signal<boolean> | boolean;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+    toggle?: boolean | (() => boolean);
+  }
+  function Checkbox(props: CheckboxProps): HTMLElement;
+
+  // Colorpicker
+  interface ColorpickerProps extends BaseProps, EventProps {
+    value?: Signal<string> | string;
+    label?: string | (() => string);
+  }
+  function Colorpicker(props: ColorpickerProps): HTMLElement;
+
+  // Datepicker
+  interface DateRange {
+    start: string;
+    end: string | null;
+    startHour?: number;
+    endHour?: number;
+  }
+  interface DatepickerProps extends BaseProps, EventProps {
+    value?: Signal<string | DateRange> | string | DateRange;
+    range?: boolean | (() => boolean);
+    label?: string | (() => string);
+    placeholder?: string | (() => string);
+    hour?: boolean;
+  }
+  function Datepicker(props: DatepickerProps): HTMLElement;
+
+  // Drawer
+  interface DrawerProps extends BaseProps, EventProps {
+    id?: string;
+    open?: Signal<boolean> | boolean;
+    side: ComponentFunction | ComponentChildren;
+    content: ComponentFunction | ComponentChildren;
+  }
+  function Drawer(props: DrawerProps, children?: ComponentChildren): HTMLElement;
+
+  // Dropdown
+  interface DropdownItem {
+    label: string | (() => string);
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+  }
+  interface DropdownProps extends BaseProps, EventProps {
+    label?: string | (() => string);
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    items?: DropdownItem[] | (() => DropdownItem[]);
+  }
+  function Dropdown(props: DropdownProps): HTMLElement;
+
+  // Fab
+  interface FabAction {
+    label?: string;
+    icon?: string | HTMLElement;
+    text?: string;
+    onclick?: (event: MouseEvent) => void;
+    class?: string;
+  }
+  interface FabProps extends BaseProps, EventProps {
+    icon?: string | HTMLElement;
+    label?: string;
+    actions?: FabAction[] | (() => FabAction[]);
+    position?: string;
+  }
+  function Fab(props: FabProps): HTMLElement;
+
+  // Fieldset
+  interface FieldsetProps extends BaseProps, EventProps {
+    legend?: string | (() => string);
+  }
+  function Fieldset(props: FieldsetProps, children: ComponentChildren): HTMLElement;
+
+  // Fileinput
+  interface FileinputProps extends BaseProps, EventProps {
+    tooltip?: string;
+    max?: number;
+    accept?: string;
+    onSelect?: (files: File[]) => void;
+  }
+  function Fileinput(props: FileinputProps): HTMLElement;
+
+  // Indicator
+  interface IndicatorProps extends BaseProps, EventProps {
+    value?: number | string | (() => number | string);
+  }
+  function Indicator(props: IndicatorProps, children: ComponentChildren): HTMLElement;
+
+  // Input
+  interface InputProps extends BaseProps, EventProps {
+    value?: Signal<string> | string;
+    type?: string;
+    icon?: string | HTMLElement | (() => string | HTMLElement);
+    placeholder?: string | (() => string);
+    disabled?: boolean | (() => boolean);
+    size?: string;
+    validate?: (value: string) => string | null | undefined;
+    label?: string | (() => string);
+  }
+  function Input(props: InputProps): HTMLElement;
+
+  // Label
+  interface LabelProps extends BaseProps, EventProps {
+    value?: string | (() => string);
+    floating?: boolean;
+    error?: string | (() => string);
+    required?: boolean;
+  }
+  function Label(props: LabelProps, children: ComponentChildren): HTMLElement;
+
+  // List
+  interface ListProps<T = any> extends BaseProps, EventProps {
+    items: T[] | (() => T[]);
+    header?: string | HTMLElement | (() => string | HTMLElement);
+    render: (item: T, index: number) => ComponentChild;
+    keyFn?: (item: T, index: number) => string | number;
+  }
+  function List<T>(props: ListProps<T>): HTMLElement;
+
+  // Menu
+  interface MenuItem {
+    label: string | (() => string);
+    icon?: string | HTMLElement;
+    onclick?: (event: MouseEvent) => void;
+    active?: boolean | (() => boolean);
+    children?: MenuItem[];
+    open?: boolean;
+  }
+  interface MenuProps extends BaseProps, EventProps {
+    items: MenuItem[] | (() => MenuItem[]);
+  }
+  function Menu(props: MenuProps): HTMLElement;
+
+  // Modal
+  interface ModalProps extends BaseProps, EventProps {
+    open?: Signal<boolean> | boolean;
+    title?: string | HTMLElement | (() => string | HTMLElement);
+    buttons?: ComponentFunction | ComponentFunction[];
+  }
+  function Modal(props: ModalProps, children: ComponentChildren): HTMLElement;
+
+  // Navbar
+  interface NavbarProps extends BaseProps, EventProps {}
+  function Navbar(props: NavbarProps, children: ComponentChildren): HTMLElement;
+
+  // Radio
+  interface RadioProps extends BaseProps, EventProps {
+    value?: Signal<any> | any;
+    inputValue?: any;
+    name?: string;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+  }
+  function Radio(props: RadioProps): HTMLElement;
+
+  // Range
+  interface RangeProps extends BaseProps, EventProps {
+    value?: Signal<number> | number;
+    label?: string | (() => string);
+    tooltip?: string | (() => string);
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean | (() => boolean);
+  }
+  function Range(props: RangeProps): HTMLElement;
+
+  // Rating
+  interface RatingProps extends BaseProps, EventProps {
+    value?: Signal<number> | number;
+    count?: number | (() => number);
+    mask?: string;
+    readonly?: boolean | (() => boolean);
+    onchange?: (value: number) => void;
+  }
+  function Rating(props: RatingProps): HTMLElement;
+
+  // Select
+  interface SelectOption {
+    label: string;
+    value: string | number;
+  }
+  interface SelectProps extends BaseProps, EventProps {
+    label?: string | (() => string);
+    items?: SelectOption[] | (() => SelectOption[]);
+    value?: Signal<string | number> | string | number;
+  }
+  function Select(props: SelectProps): HTMLElement;
+
+  // Stack
+  interface StackProps extends BaseProps, EventProps {}
+  function Stack(props: StackProps, children: ComponentChildren): HTMLElement;
+
+  // Stat
+  interface StatProps extends BaseProps, EventProps {
+    icon?: string | HTMLElement;
+    label?: string | (() => string);
+    value?: string | number | (() => string | number);
+    desc?: string | (() => string);
+  }
+  function Stat(props: StatProps): HTMLElement;
+
+  // Swap
+  interface SwapProps extends BaseProps, EventProps {
+    value?: Signal<boolean> | boolean;
+    on: ComponentChildren;
+    off: ComponentChildren;
+  }
+  function Swap(props: SwapProps): HTMLElement;
+
+  // Table
+  interface TableColumn<T = any> {
+    label: string | (() => string);
+    key?: keyof T;
+    render?: (item: T, index: number) => ComponentChild;
+    class?: string;
+  }
+  interface TableProps<T = any> extends BaseProps, EventProps {
+    items: T[] | (() => T[]);
+    columns: TableColumn<T>[];
+    keyFn?: (item: T, index: number) => string | number;
+    zebra?: boolean | (() => boolean);
+    pinRows?: boolean | (() => boolean);
+    empty?: string | HTMLElement | (() => string | HTMLElement);
+  }
+  function Table<T>(props: TableProps<T>): HTMLElement;
+
+  // Tabs
+  interface TabItem {
+    label: string | HTMLElement | (() => string | HTMLElement);
+    content: ComponentFunction | ComponentChildren;
+    active?: boolean | (() => boolean);
+    disabled?: boolean | (() => boolean);
+    onclick?: () => void;
+  }
+  interface TabsProps extends BaseProps, EventProps {
+    items: TabItem[] | (() => TabItem[]);
+  }
+  function Tabs(props: TabsProps): HTMLElement;
+
+  // Timeline
+  interface TimelineItem {
+    title: string | HTMLElement | (() => string | HTMLElement);
+    detail: string | HTMLElement | (() => string | HTMLElement);
+    type?: 'info' | 'success' | 'warning' | 'error';
+    icon?: string | HTMLElement;
+    completed?: boolean | (() => boolean);
+  }
+  interface TimelineProps extends BaseProps, EventProps {
+    items: TimelineItem[] | (() => TimelineItem[]);
+    vertical?: boolean | (() => boolean);
+    compact?: boolean | (() => boolean);
+  }
+  function Timeline(props: TimelineProps): HTMLElement;
+
+  // Toast
+  type ToastType = 'alert-info' | 'alert-success' | 'alert-warning' | 'alert-error';
+  function Toast(
+    message: string | (() => string),
+    type?: ToastType,
+    duration?: number
+  ): () => void;
+
+  // Tooltip
+  interface TooltipProps extends BaseProps, EventProps {
+    tip: string | (() => string);
+    ui?: string;
+  }
+  function Tooltip(props: TooltipProps, children: ComponentChildren): HTMLElement;
+
+  // Objeto principal
+  const SigProUI: {
+    Accordion: typeof Accordion;
+    Alert: typeof Alert;
+    Autocomplete: typeof Autocomplete;
+    Badge: typeof Badge;
+    Button: typeof Button;
+    Checkbox: typeof Checkbox;
+    Colorpicker: typeof Colorpicker;
+    Datepicker: typeof Datepicker;
+    Drawer: typeof Drawer;
+    Dropdown: typeof Dropdown;
+    Fab: typeof Fab;
+    Fieldset: typeof Fieldset;
+    Fileinput: typeof Fileinput;
+    Indicator: typeof Indicator;
+    Input: typeof Input;
+    Label: typeof Label;
+    List: typeof List;
+    Menu: typeof Menu;
+    Modal: typeof Modal;
+    Navbar: typeof Navbar;
+    Radio: typeof Radio;
+    Range: typeof Range;
+    Rating: typeof Rating;
+    Select: typeof Select;
+    Stack: typeof Stack;
+    Stat: typeof Stat;
+    Swap: typeof Swap;
+    Table: typeof Table;
+    Tabs: typeof Tabs;
+    Timeline: typeof Timeline;
+    Toast: typeof Toast;
+    Tooltip: typeof Tooltip;
+    Utils: {
+      val: typeof val;
+      ui: typeof ui;
+      getIcon: typeof getIcon;
+    };
+    tt: typeof tt;
+    install: (target?: Window) => void;
+  };
+
+  export default SigProUI;
+  export {
+    Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker,
+    Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator,
+    Input, Label, List, Menu, Modal, Navbar, Radio, Range, Rating,
+    Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip,
+    val, ui, getIcon, tt,
+    // Tipos
+    AccordionProps, AlertProps, AutocompleteProps, BadgeProps, ButtonProps,
+    CheckboxProps, ColorpickerProps, DatepickerProps, DrawerProps, DropdownProps,
+    FabProps, FieldsetProps, FileinputProps, IndicatorProps, InputProps,
+    LabelProps, ListProps, MenuProps, ModalProps, NavbarProps, RadioProps,
+    RangeProps, RatingProps, SelectProps, StackProps, StatProps, SwapProps,
+    TableProps, TabsProps, TimelineProps, TooltipProps,
+    DateRange, AutocompleteOption, DropdownItem, FabAction, MenuItem,
+    SelectOption, TabItem, TableColumn, TimelineItem, ToastType, AlertType
+  };
+}
+
+// Declaraciones globales
+declare global {
+  const Accordion: typeof import('sigpro-ui').Accordion;
+  const Alert: typeof import('sigpro-ui').Alert;
+  const Autocomplete: typeof import('sigpro-ui').Autocomplete;
+  const Badge: typeof import('sigpro-ui').Badge;
+  const Button: typeof import('sigpro-ui').Button;
+  const Checkbox: typeof import('sigpro-ui').Checkbox;
+  const Colorpicker: typeof import('sigpro-ui').Colorpicker;
+  const Datepicker: typeof import('sigpro-ui').Datepicker;
+  const Drawer: typeof import('sigpro-ui').Drawer;
+  const Dropdown: typeof import('sigpro-ui').Dropdown;
+  const Fab: typeof import('sigpro-ui').Fab;
+  const Fieldset: typeof import('sigpro-ui').Fieldset;
+  const Fileinput: typeof import('sigpro-ui').Fileinput;
+  const Indicator: typeof import('sigpro-ui').Indicator;
+  const Input: typeof import('sigpro-ui').Input;
+  const Label: typeof import('sigpro-ui').Label;
+  const List: typeof import('sigpro-ui').List;
+  const Menu: typeof import('sigpro-ui').Menu;
+  const Modal: typeof import('sigpro-ui').Modal;
+  const Navbar: typeof import('sigpro-ui').Navbar;
+  const Radio: typeof import('sigpro-ui').Radio;
+  const Range: typeof import('sigpro-ui').Range;
+  const Rating: typeof import('sigpro-ui').Rating;
+  const Select: typeof import('sigpro-ui').Select;
+  const Stack: typeof import('sigpro-ui').Stack;
+  const Stat: typeof import('sigpro-ui').Stat;
+  const Swap: typeof import('sigpro-ui').Swap;
+  const Table: typeof import('sigpro-ui').Table;
+  const Tabs: typeof import('sigpro-ui').Tabs;
+  const Timeline: typeof import('sigpro-ui').Timeline;
+  const Toast: typeof import('sigpro-ui').Toast;
+  const Tooltip: typeof import('sigpro-ui').Tooltip;
+  const Utils: typeof import('sigpro-ui').Utils;
+  const tt: typeof import('sigpro-ui').tt;
+
+  interface Window {
+    Accordion: typeof Accordion;
+    Alert: typeof Alert;
+    Autocomplete: typeof Autocomplete;
+    Badge: typeof Badge;
+    Button: typeof Button;
+    Checkbox: typeof Checkbox;
+    Colorpicker: typeof Colorpicker;
+    Datepicker: typeof Datepicker;
+    Drawer: typeof Drawer;
+    Dropdown: typeof Dropdown;
+    Fab: typeof Fab;
+    Fieldset: typeof Fieldset;
+    Fileinput: typeof Fileinput;
+    Indicator: typeof Indicator;
+    Input: typeof Input;
+    Label: typeof Label;
+    List: typeof List;
+    Menu: typeof Menu;
+    Modal: typeof Modal;
+    Navbar: typeof Navbar;
+    Radio: typeof Radio;
+    Range: typeof Range;
+    Rating: typeof Rating;
+    Select: typeof Select;
+    Stack: typeof Stack;
+    Stat: typeof Stat;
+    Swap: typeof Swap;
+    Table: typeof Table;
+    Tabs: typeof Tabs;
+    Timeline: typeof Timeline;
+    Toast: typeof Toast;
+    Tooltip: typeof Tooltip;
+    Utils: typeof Utils;
+    tt: typeof tt;
+    SigProUI: typeof import('sigpro-ui').default;
+  }
+}

index.js

@@ -1,25 +1,10 @@
 // index.js
-import './src/sigpro.js';
+import './src/sigpro.js'; // El Core
-// import './src/css/sigpro.css';  // No importes CSS en JS
 import * as Components from './src/components/index.js';
-// import * as Icons from './src/core/icons.js';  // ELIMINAR
 import * as Utils from './src/core/utils.js';
 import { tt } from './src/core/i18n.js';
 
+// Exportamos todo para que el Tree Shaking funcione
 export * from './src/components/index.js';
-// export * from './src/core/icons.js';  // ELIMINAR
 export * from './src/core/utils.js';
 export { tt };
-
-if (typeof window !== 'undefined') {
-  Object.entries(Components).forEach(([name, component]) => {
-    window[name] = component;
-  });
-  
-  // window.Icons = Icons;  // ELIMINAR
-  window.Utils = Utils;
-  window.tt = tt;
-  window.SigProUI = { ...Components, Utils, tt };
-  
-  console.log("🎨 SigProUI ready");
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sigpro-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "main": "./index.js",
   "module": "./index.js",
   "devDependencies": {
@@ -12,16 +12,26 @@
   },
   "exports": {
     ".": {
-      "import": "./index.js",
+      "import": "./dist/sigpro-ui.esm.js",
-      "script": "./dist/sigpro-ui.js"
+      "script": "./dist/sigpro-ui.js",
+      "types": "./index.d.ts"
     },
     "./css": {
       "import": "./css/index.js",
       "default": "./css/index.js"
     }
   },
+  "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"
+  },
   "files": [
     "index.js",
+    "index.d.ts",
     "dist",
     "css",
     "README.md",
@@ -29,13 +39,20 @@
   ],
   "jsdelivr": "./dist/sigpro-ui.min.js",
   "license": "MIT",
+  "sideEffects": [
+    "./css/*",
+    "**/*.css"
+  ],
   "scripts": {
-    "build:cssmin": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
+    "clean": "rm -rf ./dist ./css/*.css ./docs/*.js ./docs/*.css",
-    "build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'",
+    "build:cssmin": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.min.css --content './src/**/*.js' --minify",
-    "build:cssdocs": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
+    "build:css": "tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js'",
-    "build:js": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build:cssdocs": "tailwindcss -i ./src/css/sigpro.css -o ./docs/sigpro.css --content './src/**/*.js' --minify",
+    "build:js": "bun run build:js:iife && bun run build:js:esm",
+    "build:js:iife": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
+    "build:js:esm": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.js --format=esm && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.esm.min.js --format=esm --minify",
     "build:jsdocs": "bun build ./index.js --bundle --outfile=./docs/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
-    "build": "bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin",
+    "build": "bun run clean && bun run build:css && bun run build:js && bun run build:jsdocs && bun run build:cssdocs && bun run build:cssmin",
     "prepublishOnly": "bun run build",
     "docs": "bun x serve docs"
   },

src/bundle.js

@@ -0,0 +1,23 @@
+// src/bundle.js
+import './sigpro.js'; // Ahora sí, están en la misma carpeta
+import * as Components from './components/index.js';
+import * as Utils from './core/utils.js';
+import { tt } from './core/i18n.js';
+
+if (typeof window !== 'undefined') {
+  // Registramos funciones globales: Div(), Input(), tt()...
+  Object.entries(Components).forEach(([name, component]) => {
+    window[name] = component;
+  });
+
+  window.Utils = Utils;
+  window.tt = tt;
+  window.SigProUI = { ...Components, Utils, tt };
+
+  console.log("🎨 SigProUI (Global Mode) ready");
+}
+
+// Re-exportamos por compatibilidad
+export * from './components/index.js';
+export * from './core/utils.js';
+export { tt };