uploading docs, preview

docs/components/button.md

@@ -0,0 +1,221 @@
+# Button
+
+Styled button with full DaisyUI support and reactive states.
+
+## Tag
+
+`Button`
+
+## 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 |
+| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
+| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
+| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
+| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
+| `onclick` | `function` | `-` | Click event handler |
+| `type` | `string` | `'button'` | Native button type |
+
+## Live Examples
+
+### Basic Button
+
+<div id="demo-basic"></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-primary" }, "Click Me");
+  };
+
+  $mount(Demo, "#demo-basic");
+</script>
+
+```javascript
+Button({ class: "btn-primary" }, "Click Me")
+```
+
+### With Loading State
+
+<div id="demo-loading"></div>
+
+<script type="module">
+  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
+  import { Button } from '../../sigpro-ui/sigpro-ui.js';
+
+  const isSaving = $(false);
+
+  const Demo = () => {
+    return Button({
+      class: "btn-success",
+      loading: isSaving,
+      onclick: async () => {
+        isSaving(true);
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        isSaving(false);
+      }
+    }, "Save Changes");
+  };
+
+  $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
+
+<div id="demo-badge"></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-outline",
+      badge: "3",
+      badgeClass: "badge-accent"
+    }, "Notifications");
+  };
+
+  $mount(Demo, "#demo-badge");
+</script>
+
+```javascript
+Button({
+  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(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';
+
+  const isDisabled = $(true);
+
+  const Demo = () => {
+    return Button({
+      class: "btn-primary",
+      disabled: isDisabled
+    }, "Submit");
+  };
+
+  $mount(Demo, "#demo-disabled");
+</script>
+
+```javascript
+const isDisabled = $(true);
+
+Button({
+  class: "btn-primary",
+  disabled: isDisabled
+}, "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(Demo, "#demo-variants");
+</script>
+
+```javascript
+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")
+])
+```
+```
+
+## 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;
+}