Include AutoInstall

docs/components/button.md

@@ -9,7 +9,7 @@ Styled button with full DaisyUI support and reactive states.
 ## Props
 
 | Prop         | Type                         | Default             | Description                                 |
-| :--- | :--- | :--- | :--- |
+| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
 | `class`      | `string`                     | `''`                | Additional CSS classes (DaisyUI + Tailwind) |
 | `disabled`   | `boolean \| Signal<boolean>` | `false`             | Disabled state                              |
 | `loading`    | `boolean \| Signal<boolean>` | `false`             | Shows loading spinner                       |
@@ -24,36 +24,158 @@ Styled button with full DaisyUI support and reactive states.
 
 ### 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">
-<script type="module">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
+    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
+  </div>
-
+</div>
-  const Demo = () => {
-    return Button({ class: "btn-primary" }, "Click Me");
-  };
-
-  $mount(Demo, "#demo-basic");
-</script>
 
 ```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">
-<script type="module">
+    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
+    <div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
-  import { Button } from '../../sigpro-ui/sigpro-ui.js';
+  </div>
+</div>
 
+```javascript
+const LoadingDemo = () => {
   const isSaving = $(false);
 
-  const Demo = () => {
+  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, "#demo-loading");
+```
+
+### With Badge
+
+<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
+const BadgeDemo = () => {
+  return Button(
+    {
+      class: "btn btn-outline",
+      badge: "3",
+      badgeClass: "badge-accent",
+    },
+    "Notifications",
+  );
+};
+$mount(BadgeDemo, "#demo-badge");
+```
+
+### With Tooltip
+
+<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
+const TooltipDemo = () => {
+  return Button(
+    {
+      class: "btn btn-ghost",
+      tooltip: "Delete item",
+    },
+    "Delete",
+  );
+};
+$mount(TooltipDemo, "#demo-tooltip");
+```
+
+### Disabled State
+
+<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 DisabledDemo = () => {
+  const isDisabled = $(true);
+
+  return Button(
+    {
+      class: "btn btn-primary",
+      disabled: isDisabled,
+    },
+    "Submit",
+  );
+};
+$mount(DisabledDemo, "#demo-disabled");
+```
+
+### All Variants
+
+<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
+const VariantsDemo = () => {
+  return 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, "#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-success",
+            class: "btn btn-success",
             loading: isSaving,
             onclick: async () => {
               isSaving(true);
@@ -62,160 +184,65 @@ Button({ class: "btn-primary" }, "Click Me")
             }
           }, "Save Changes");
         };
-
+        $mount(LoadingDemo, loadingTarget);
-  $mount(Demo, "#demo-loading");
-</script>
-
-```javascript
-const isSaving = $(false);
-
-Button({
-  class: "btn-success",
-  loading: isSaving,
-  onclick: async () => {
-    isSaving(true);
-    await saveData();
-    isSaving(false);
       }
-}, "Save Changes")
-```
 
-### With Badge
+      // 3. Badge
-
+      const badgeTarget = document.querySelector('#demo-badge');
-<div id="demo-badge"></div>
+      if (badgeTarget && !badgeTarget.hasChildNodes()) {
-
+        const BadgeDemo = () => Button({
-<script type="module">
+          class: "btn btn-outline",
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const Demo = () => {
-    return Button({
-      class: "btn-outline",
           badge: "3",
           badgeClass: "badge-accent"
         }, "Notifications");
-  };
+        $mount(BadgeDemo, badgeTarget);
+      }
 
-  $mount(Demo, "#demo-badge");
+      // 4. Tooltip
-</script>
+      const tooltipTarget = document.querySelector('#demo-tooltip');
-
+      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
-```javascript
+        const TooltipDemo = () => Button({
-Button({
+          class: "btn btn-ghost",
-  class: "btn-outline",
-  badge: "3",
-  badgeClass: "badge-accent"
-}, "Notifications")
-```
-
-### With Tooltip
-
-<div id="demo-tooltip"></div>
-
-<script type="module">
-  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const Demo = () => {
-    return Button({
-      class: "btn-ghost",
           tooltip: "Delete item"
         }, "Delete");
-  };
+        $mount(TooltipDemo, tooltipTarget);
-
+      }
-  $mount(Demo, "#demo-tooltip");
-</script>
-
-```javascript
-Button({
-  class: "btn-ghost",
-  tooltip: "Delete item"
-}, "Delete")
-```
-
-### Disabled State
-
-<div id="demo-disabled"></div>
-
-<script type="module">
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
 
+      // 5. Disabled State
+      const disabledTarget = document.querySelector('#demo-disabled');
+      if (disabledTarget && !disabledTarget.hasChildNodes()) {
+        const DisabledDemo = () => {
           const isDisabled = $(true);
-
-  const Demo = () => {
           return Button({
-      class: "btn-primary",
+            class: "btn btn-primary",
             disabled: isDisabled
           }, "Submit");
         };
+        $mount(DisabledDemo, disabledTarget);
+      }
 
-  $mount(Demo, "#demo-disabled");
+      // 6. All Variants
-</script>
+      const variantsTarget = document.querySelector('#demo-variants');
-
+      if (variantsTarget && !variantsTarget.hasChildNodes()) {
-```javascript
+        const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
-const isDisabled = $(true);
+          Button({ class: "btn btn-primary" }, "Primary"),
-
+          Button({ class: "btn btn-secondary" }, "Secondary"),
-Button({
+          Button({ class: "btn btn-accent" }, "Accent"),
-  class: "btn-primary",
+          Button({ class: "btn btn-ghost" }, "Ghost"),
-  disabled: isDisabled
+          Button({ class: "btn btn-outline" }, "Outline")
-}, "Submit")
-```
-
-### All Variants
-
-<div id="demo-variants"></div>
-
-<script type="module">
-  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
-
-  const isLoading = $(false);
-
-  const Demo = () => {
-    return Div({ class: "flex flex-wrap gap-2" }, [
-      Button({ class: "btn-primary" }, "Primary"),
-      Button({ class: "btn-secondary" }, "Secondary"),
-      Button({ class: "btn-accent" }, "Accent"),
-      Button({ class: "btn-ghost" }, "Ghost"),
-      Button({ class: "btn-outline" }, "Outline"),
-      Button({ class: "btn-success", loading: isLoading, onclick: () => {
-        isLoading(true);
-        setTimeout(() => isLoading(false), 1500);
-      } }, "Loading")
         ]);
+        $mount(VariantsDemo, variantsTarget);
+      }
     };
 
-  $mount(Demo, "#demo-variants");
+    // Ejecutar la función después de definirla
-</script>
+    initButtonExamples();
     
-```javascript
+    // Registrar para navegación en Docsify
-Div({ class: "flex flex-wrap gap-2" }, [
+    if (window.$docsify) {
-  Button({ class: "btn-primary" }, "Primary"),
+      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
-  Button({ class: "btn-secondary" }, "Secondary"),
+        hook.doneEach(initButtonExamples);
-  Button({ class: "btn-accent" }, "Accent"),
+      });
-  Button({ class: "btn-ghost" }, "Ghost"),
-  Button({ class: "btn-outline" }, "Outline")
-])
-```
-```
-
-## Ventajas de este enfoque:
-
-1. **Ejecución real** - Los ejemplos son interactivos y funcionales
-2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
-3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
-4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción
-
-## Consejos adicionales:
-
-Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:
-
-```css
-/* En tu HTML, dentro de <style> */
-.demo-container {
-  margin: 1rem 0;
-  padding: 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  background: #f8fafc;
     }
+  })();
+</script>

docs/index.html

@@ -39,13 +39,8 @@
       };
     </script>
 
-    <script type="module">
+    <script src="https://unpkg.com/sigpro"></script>
-      import * as sigpro from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
+    <script src="https://unpkg.com/sigpro-ui"></script>
-      import { UI } from "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm";
-      window.sigpro = sigpro;
-      // const ui = UI("en");
-      // window.sigproui = 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,14 +1,22 @@
 {
   "name": "sigpro-ui",
-  "version": "1.0.3",
+  "version": "1.0.6",
-  "type": "module",
+  "repository": {
-  "license": "MIT",
+    "type": "git",
-  "main": "./dist/sigpro-ui.js",
+    "url": "https://github.com/natxocc/sigpro-ui.git"
-  "module": "./index.js",
+  },
-  "unpkg": "./dist/sigpro-ui.min.js",
+  "main": "./dist/sigpro-ui.cjs",
-  "jsdelivr": "./dist/sigpro-ui.min.js",
+  "module": "./dist/sigpro-ui.esm.js",
+  "unpkg": "./dist/sigpro-ui.umd.min.js",
+  "jsdelivr": "./dist/sigpro-ui.umd.min.js",
   "exports": {
-    ".": "./index.js"
+    ".": {
+      "import": "./dist/sigpro-ui.esm.js",
+      "require": "./dist/sigpro-ui.cjs"
+    }
+  },
+  "bugs": {
+    "url": "https://github.com/natxocc/sigpro-ui/issues"
   },
   "files": [
     "index.js",
@@ -18,21 +26,6 @@
     "LICENSE"
   ],
   "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"
-  },
-  "scripts": {
-    "docs": "bun x serve docs",
-    "build": "bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
-    "prepublishOnly": "npm run build"
-  },
-  "peerDependencies": {
-    "sigpro": ">=1.1.16"
-  },
   "keywords": [
     "signals",
     "reactive",
@@ -41,5 +34,19 @@
     "UI",
     "vanilla-js",
     "reactive-programming"
-  ]
+  ],
+  "license": "MIT",
+  "scripts": {
+    "docs": "bun x serve docs",
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "sigpro": ">=1.1.16"
+  },
+  "type": "module",
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.34.8"
+  }
 }

rollup.config.js

@@ -0,0 +1,49 @@
+import terser from '@rollup/plugin-terser';
+
+export default [
+  // ESM
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.esm.js',
+      format: 'esm'
+    }
+  },
+  // CommonJS
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.cjs',
+      format: 'cjs'
+    }
+  },
+  // UMD (IIFE para navegador)
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.umd.js',
+      format: 'iife',
+      name: 'SigProUI',
+      globals: {
+        sigpro: 'SigPro'
+      }
+    }
+  },
+  // UMD minificado
+  {
+    input: './index.js',
+    external: ['sigpro'],
+    output: {
+      file: './dist/sigpro-ui.umd.min.js',
+      format: 'iife',
+      name: 'SigProUI',
+      globals: {
+        sigpro: 'SigPro'
+      },
+      plugins: [terser()]
+    }
+  }
+];