Include AutoInstall

dist/sigpro-ui.cjs

@@ -1618,6 +1618,10 @@ const SigproUI = {
   }
 };
 
+if (typeof window !== 'undefined') {
+  SigproUI.install(window);
+}
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Autocomplete = Autocomplete;

dist/sigpro-ui.esm.js

@@ -1614,4 +1614,8 @@ const SigproUI = {
   }
 };
 
+if (typeof window !== 'undefined') {
+  SigproUI.install(window);
+}
+
 export { Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker, Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator, Input, List, Loading, Menu, Modal, Navbar, Radio, Range, Rating, Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip, SigproUI as default, icon123, iconAbc, iconCalendar, iconClose, iconError, iconHide, iconInfo, iconLLeft, iconLeft, iconLock, iconMail, iconRRight, iconRight, iconShow, iconSuccess, iconUpload, iconWarning, joinClass, tt, val };

dist/sigpro-ui.umd.js

@@ -1615,6 +1615,10 @@ var SigProUI = (function (exports, sigpro) {
     }
   };
 
+  if (typeof window !== 'undefined') {
+    SigproUI.install(window);
+  }
+
   exports.Accordion = Accordion;
   exports.Alert = Alert;
   exports.Autocomplete = Autocomplete;

docs/components/button.md

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

docs/index.html

@@ -39,8 +39,8 @@
       };
     </script>
 
-    <script src="https://unpkg.com/sigpro"> </script>
+    <script src="https://unpkg.com/sigpro"></script>
-    <script src="https://unpkg.com/sigpro-ui"> </script>
+    <script src="https://unpkg.com/sigpro-ui"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
   </body>

index.js

@@ -33,4 +33,8 @@ const SigproUI = {
   }
 };
 
+if (typeof window !== 'undefined') {
+  SigproUI.install(window);
+}
+
 export default SigproUI;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sigpro-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/natxocc/sigpro-ui.git"