Next Preview Work Final

docs/quick.md

@@ -1,6 +1,5 @@
 # SigPro-UI Quick Reference
 
-**Version:** daisyUI v5 + Tailwind v4 Plugin  
 **Status:** Active / WIP
 
 
@@ -8,9 +7,7 @@
 
 ```javascript
 import "sigpro-ui";
-
-// Injects all components into window and sets default language
-Locale('en'); // 'es' or 'en'
+import "sigpro-ui/css";
 
 // All components (Button, Input, Table, Toast, etc.) are now globally available.
 ```
@@ -22,7 +19,7 @@ Locale('en'); // 'es' or 'en'
 | Component | Purpose | Basic Example |
 | :--- | :--- | :--- |
 | **Button** | Styled button with DaisyUI | `Button({ class: "btn-primary" }, "Submit")` |
-| **Input** | Reactive text field with floating label | `Input({ label: "Name", value: $name })` |
+| **Input** | Reactive text field with validation | `Input({ value: $name, validate: (v) => !v ? "Required" : "" })` |
 | **Select** | Dropdown selection menu | `Select({ options: ["Admin", "User"], value: $role })` |
 | **Checkbox** | Binary toggle (boolean) | `Checkbox({ label: "Active", checked: $isActive })` |
 | **Table** | Data grid with column rendering | `Table({ items: $data, columns: [...] })` |
@@ -40,7 +37,7 @@ Locale('en'); // 'es' or 'en'
 
 | Component | Description | Example |
 | :--- | :--- | :--- |
-| **Input** | Text input with floating label, validation, password toggle | `Input({ label: "Email", type: "email", value: $email })` |
+| **Input** | Text input with floating label, validation, password toggle | `Input({ label: "Email", type: "email", value: $email, validate: validateEmail })` |
 | **Select** | Dropdown selector | `Select({ label: "Role", options: ["Admin", "User"], value: $role })` |
 | **Autocomplete** | Searchable dropdown with filtering | `Autocomplete({ label: "Country", options: countryList, value: $country })` |
 | **Datepicker** | Date picker (single or range mode) | `Datepicker({ label: "Date", value: $date, range: false })` |
@@ -53,6 +50,36 @@ Locale('en'); // 'es' or 'en'
 
 ---
 
+## Input Validation
+
+The `Input` component supports real-time validation via the `validate` prop:
+
+```javascript
+const email = $('');
+
+Input({
+  type: 'email',
+  value: email,
+  placeholder: 'Enter your email',
+  icon: 'icon-[lucide--mail]',
+  validate: (value) => {
+    if (!value) return '';
+    if (!value.includes('@')) return 'Email must contain @';
+    if (!value.includes('.')) return 'Email must contain .';
+    return '';
+  },
+  oninput: (e) => email(e.target.value)
+})
+```
+
+**How it works:**
+- Returns `''` or `null` → no error
+- Returns a string → shows error message and adds `input-error` class
+- Validates on every keystroke
+- No external state needed for error messages
+
+---
+
 ## Data Display
 
 | Component | Description | Example |
@@ -63,7 +90,7 @@ Locale('en'); // 'es' or 'en'
 | **Stat** | Statistical data blocks (KPIs) | `Stat({ label: "Total", value: "1.2k", desc: "Monthly" })` |
 | **Timeline** | Vertical/horizontal timeline | `Timeline({ items: [{ title: "Step 1", detail: "Completed" }] })` |
 | **Stack** | Stacked elements | `Stack({}, [Card1, Card2, Card3])` |
-| **Indicator** | Badge on corner of element | `Indicator({ badge: "3" }, Button(...))` |
+| **Indicator** | Badge on corner of element | `Indicator({ value: () => count() }, Button(...))` |
 
 ---
 
@@ -74,7 +101,7 @@ Locale('en'); // 'es' or 'en'
 | **Alert** | Inline contextual notification | `Alert({ type: "success" }, "Changes saved!")` |
 | **Modal** | Dialog overlay | `Modal({ open: $isOpen, title: "Confirm" }, "Are you sure?")` |
 | **Toast** | Floating notification (auto-stacking) | `Toast("Action completed", "alert-info", 3000)` |
-| **Tooltip** | Hover tooltip wrapper | `Tooltip({ tip: "Help text" }, Button(...))` |
+| **Tooltip** | Hover tooltip wrapper | `Tooltip({ tip: "Help text", ui: "tooltip-top" }, Button(...))` |
 
 ---
 
@@ -97,7 +124,7 @@ Locale('en'); // 'es' or 'en'
 | Component | Description | Example |
 | :--- | :--- | :--- |
 | **Fab** | Floating Action Button with actions | `Fab({ icon: "+", actions: [{ label: "Add", onclick: add }] })` |
-| **Indicator** | Badge indicator wrapper | `Indicator({ badge: "99+" }, Button(...))` |
+| **Indicator** | Badge indicator wrapper | `Indicator({ value: () => unread() }, Button(...))` |
 
 ---
 
@@ -138,15 +165,16 @@ const closeText = tt("close"); // "Close" or "Cerrar"
 
 ```javascript
 const name = $("");
-const error = $(null);
 
 Input({
   value: name,
-  error: error,
-  oninput: (e) => {
-    name(e.target.value);
-    error(e.target.value.length < 3 ? "Name too short" : null);
-  }
+  placeholder: "Name",
+  validate: (value) => {
+    if (!value) return "Name is required";
+    if (value.length < 3) return "Name too short";
+    return "";
+  },
+  oninput: (e) => name(e.target.value)
 })
 ```
 
@@ -186,14 +214,14 @@ Modal({
 
 | Component | Key Props |
 | :--- | :--- |
-| `Button` | `class`, `disabled`, `loading`, `badge`, `tooltip`, `icon` |
-| `Input` | `label`, `value`, `error`, `type`, `placeholder`, `disabled`, `tip` |
+| `Button` | `class`, `disabled`, `loading`, `icon` |
+| `Input` | `value`, `validate`, `type`, `placeholder`, `icon`, `disabled` |
 | `Select` | `label`, `options`, `value`, `disabled` |
 | `Modal` | `open`, `title`, `buttons` |
 | `Table` | `items`, `columns`, `zebra`, `pinRows`, `empty` |
 | `Alert` | `type` (info/success/warning/error), `soft`, `actions` |
 | `Toast` | `message`, `type`, `duration` |
-| `Loading` | `show` |
 | `Datepicker` | `value`, `range`, `label`, `placeholder` |
 | `Autocomplete` | `options`, `value`, `onSelect`, `label` |
-
+| `Indicator` | `value` (function that returns number/string) |
+| `Tooltip` | `tip`, `ui` (tooltip-top/bottom/left/right) |