Update docs

2026-04-27 20:44:55 +02:00
parent 0b6e4fdad8
commit aa0764ad55
2 changed files with 38 additions and 49 deletions
--- a/docs/README.md
+++ b/docs/README.md
@@ -61,7 +61,7 @@ It eliminates the gap between your data (Signals) and your UI components. Each c
 | **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
 | **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
 | **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
-| **Learning Curve** | **Zero** | whenyou know JS and HTML, you know SigPro-UI. |
+| **Learning Curve** | **Zero** | when you know JS and HTML, you know SigPro-UI. |

 ### Semantic Functionalism
 Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
--- a/docs/install.md
+++ b/docs/install.md
@@ -5,57 +5,55 @@ Follow these steps to integrate **SigPro-UI** into your project.
 ---

 !> **📘 Core Concepts**  
-**Note:** SigPro-UI now includes SigPro core internally. No need to install SigPro separately.
- SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
+SigProUI is built on top of the [SigPro](https://sigpro.natxocc.com/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://sigpro.natxocc.com/#/).
+
 ---

-## 1. Install the package
-
-Choose your preferred package manager:
+## 1. Install the packages

 ```bash
-npm install sigpro-ui
+# ESM / Bundler (tree-shaking)
+npm install sigpro sigpro-ui
+
+# Or with bun
+bun add sigpro sigpro-ui
 ```

 ## 2. Import and use in your app

-### ESM / Module usage
+### ESM / Module usage (tree-shaking)

 ```javascript
-// Import everything from sigpro-ui (includes sigpro core)
-import { $, mount, Button, Alert, Input, tt } from "sigpro-ui";
+import { $, watch, h, mount } from "sigpro";
+import { Button, Input, Alert, Toast, tt } from "sigpro-ui";
 import "sigpro-ui/css";

-// Create your app
 const App = () => {
  const count = $(0);
  
  return h('div', { class: 'p-8 max-w-md mx-auto' }, [
    h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
    
-    input({
+    Input({
      placeholder: 'Enter your name...'
    }),
    
-    button({
+    Button({
      class: 'btn-primary mt-4',
      onclick: () => count(count() + 1)
    }, () => `Clicks: ${count()}`),
    
    Alert({
-      type: 'success',
+      class: 'alert-success',
      message: () => `Welcome to SigProUI!`
    })
  ]);
 };

-// mount your app
 mount(App, "#app");
 ```

-### CDN Usage (no build step)
-
-Simply add the script tag and start using SigProUI:
+### CDN Usage (no build step - all-in-one)

 ```html
 <!DOCTYPE html>
@@ -64,8 +62,7 @@ Simply add the script tag and start using SigProUI:
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SigProUI Demo</title>
-  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
-  <link href="https://unpkg.com/sigpro-ui@latest/css/sigpro-ui.min.css" rel="stylesheet">
+  <link href="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.css" rel="stylesheet">
  <style>
    body { padding: 2rem; }
  </style>
@@ -73,12 +70,8 @@ Simply add the script tag and start using SigProUI:
 <body>
  <div id="app"></div>

+  <script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
  <script>
-    // All functions are available directly in window
-    // No need to import anything!
-    
-    const { $, mount, Button, Input, Alert } = window;
-    
    const App = () => {
      const name = $('');
      const count = $(0);
@@ -86,18 +79,18 @@ Simply add the script tag and start using SigProUI:
      return h('div', { class: 'max-w-md mx-auto p-4' }, [
        h('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
        
-        input({
+        Input({
          value: name,
          placeholder: 'Enter your name...'
        }),
        
-        button({
+        Button({
          class: 'btn-primary mt-4',
          onclick: () => count(count() + 1)
        }, () => `Clicks: ${count()}`),
        
        Alert({
-          type: 'success',
+          class: 'alert-success',
          message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
        })
      ]);
@@ -111,26 +104,24 @@ Simply add the script tag and start using SigProUI:

 ## What's included?

-When you install SigProUI, you get:
-
 ### SigPro Core Functions
 - `$()` - Reactive signals
- `watch()` - watch reactive dependencies
+- `watch()` - Watch reactive dependencies
 - `h()` - Create HTML elements with reactivity
 - `when()` - Conditional rendering
 - `each()` - List rendering
- `router()` - Hash-based routing
- `mount()` - mount components to DOM
+- `mount()` - Mount components to DOM

->For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/)
+> For more information about SigPro Core visit official Docs [SigPro Docs](https://sigpro.natxocc.com/#/)

 ### UI Components
- `button()` - Styled button with DaisyUI
- `input()` - Form input with floating labels
+- `Button()` - Styled button with DaisyUI
+- `Input()` - Form input with floating labels
 - `Alert()` - Alert messages
 - `Modal()` - Modal dialogs
 - `Table()` - Data tables
 - `Tabs()` - Tabbed interfaces
+- `Toast()` - Toast notifications
 - And 30+ more components!

 ### Utilities
@@ -147,31 +138,29 @@ import { tt, Locale } from 'sigpro-ui';
 Locale('en');

 // Use translations
-const closeButton = button({}, tt('close')());
-const searchPlaceholder = input({ placeholder: tt('search')() });
+Button({}, tt('close'));
+Input({ placeholder: tt('search') });
 ```

 ## TypeScript Support

-SigProUI includes TypeScript definitions. Import types as needed:
+SigProUI includes TypeScript definitions:

 ```typescript
-import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
-
-const MyButton: React.FC<ButtonProps> = (props) => {
-  return button(props, 'Click me');
-};
+import { $ } from 'sigpro';
+import { Button, Input, Toast } from 'sigpro-ui';
+import type { ButtonProps, InputProps } from 'sigpro-ui';
 ```

 ## Troubleshooting

 | Problem | Solution |
 | :--- | :--- |
-| Components don't look styled | Make sure you're loading css 'sigpro.css' (either via import or CDN)|
-| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
-| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
-| Build errors | Ensure you're using a modern bundler that supports ESM |
-| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
+| Components don't look styled | Make sure you're loading the CSS (`sigpro-ui.min.css`) |
+| `$ is not defined` | ESM: import from `sigpro`. CDN: functions are in global scope |
+| `Button is not defined` | ESM: `import { Button } from 'sigpro-ui'`. CDN: available globally |
+| Build errors | Install both `sigpro` and `sigpro-ui` |
+| CDN functions not working | All core functions (`$`, `h`, `watch`, etc.) are available globally |
 | Locale not working | Set locale with `Locale('en')` before using translations |

 **Happy coding!** 🎉