Include AutoInstall

docs/components/button.md

@@ -8,214 +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">
-<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(
-    return Button({
+    {
-      class: "btn-success",
+      class: "btn btn-success",
       loading: isSaving,
       onclick: async () => {
         isSaving(true);
-        await new Promise(resolve => setTimeout(resolve, 2000));
+        await new Promise((resolve) => setTimeout(resolve, 2000));
         isSaving(false);
-      }
+      },
-    }, "Save Changes");
+    },
-  };
+    "Save Changes",
-
+  );
-  $mount(Demo, "#demo-loading");
+};
-</script>
+$mount(LoadingDemo, "#demo-loading");
-
-```javascript
-const isSaving = $(false);
-
-Button({
-  class: "btn-success",
-  loading: isSaving,
-  onclick: async () => {
-    isSaving(true);
-    await saveData();
-    isSaving(false);
-  }
-}, "Save Changes")
 ```
 
 ### 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">
-<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-badge" 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-outline",
-      badge: "3",
-      badgeClass: "badge-accent"
-    }, "Notifications");
-  };
-
-  $mount(Demo, "#demo-badge");
-</script>
 
 ```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">
-<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-tooltip" 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-ghost",
-      tooltip: "Delete item"
-    }, "Delete");
-  };
-
-  $mount(Demo, "#demo-tooltip");
-</script>
 
 ```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">
-<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-disabled" 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 isDisabled = $(true);
-
-  const Demo = () => {
-    return Button({
-      class: "btn-primary",
-      disabled: isDisabled
-    }, "Submit");
-  };
-
-  $mount(Demo, "#demo-disabled");
-</script>
 
 ```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">
-<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-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
-  import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
+  </div>
-
+</div>
-  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(Demo, "#demo-variants");
-</script>
 
 ```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");
 ```
 
-## Ventajas de este enfoque:
+<script>
+  (function() {
+    const initButtonExamples = () => {
       
-1. **Ejecución real** - Los ejemplos son interactivos y funcionales
+      // 1. Basic Button
-2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
+      const basicTarget = document.querySelector('#demo-basic');
-3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
+      if (basicTarget && !basicTarget.hasChildNodes()) {
-4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción
+        const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
+        $mount(BasicDemo, basicTarget);
+      }
 
-## Consejos adicionales:
+      // 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);
+      }
 
-Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:
+      // 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);
+      }
 
-```css
+      // 4. Tooltip
-/* En tu HTML, dentro de <style> */
+      const tooltipTarget = document.querySelector('#demo-tooltip');
-.demo-container {
+      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
-  margin: 1rem 0;
+        const TooltipDemo = () => Button({
-  padding: 1rem;
+          class: "btn btn-ghost",
-  border: 1px solid #e2e8f0;
+          tooltip: "Delete item"
-  border-radius: 0.5rem;
+        }, "Delete");
-  background: #f8fafc;
+        $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,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()]
+    }
+  }
+];