simplify components

docs/components/button.md

@@ -17,13 +17,13 @@
 
 ## Classes (daisyUI)
 
-| Category | Keywords | Description |
-| :--- | :--- | :--- |
-| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
-| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
-| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
-| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
-| State | `btn-active`, `btn-disabled` | Forced visual states |
+| Category | Keywords                                                                                                         | Description           |
+| :------- | :--------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| Color    | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
+| Size     | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl`                                                                 | Button scale          |
+| Style    | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link`                                                                | Visual style variants |
+| Shape    | `btn-circle`, `btn-square`, `btn-wide`, `btn-block`                                                              | Button shape          |
+| State    | `btn-active`, `btn-disabled`                                                                                     | Forced visual states  |
 
 > SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
 > For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.
@@ -31,7 +31,7 @@
 ### Example
 
 ```javascript
-Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
+Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
 // Applies: primary color, large size, circular shape
 // class is any css class from pure css or favorite framework
 ```
@@ -62,14 +62,14 @@ const LoadingDemo = () => {
   return Button(
     {
       class: "btn-success",
-      loading: isSaving,
+      disabled: isSaving,
       onclick: async () => {
         isSaving(true);
         await new Promise((resolve) => setTimeout(resolve, 2000));
         isSaving(false);
       },
     },
-    "Save Changes",
+    [Spinner({ value: isSaving }), "Save Changes"],
   );
 };
 Mount(LoadingDemo, "#demo-loading");
@@ -81,13 +81,9 @@ Mount(LoadingDemo, "#demo-loading");
 
 ```javascript
 const IconDemo = () => {
-  return Button(
-    {
-      class: "btn-primary",
-      icon: "⭐",
-    },
-    "Favorite",
-  );
+  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
+    Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
+  ]);
 };
 Mount(IconDemo, "#demo-icon");
 ```
@@ -112,7 +108,10 @@ Mount(BadgeDemo, "#demo-badge");
 
 ```javascript
 const TooltipDemo = () => {
-  return Tooltip({ tip: "Delete item" }, Button({ class: "btn-ghost" }, "Delete"));
+  return Tooltip(
+    { tip: "Delete item" },
+    Button({ class: "btn-ghost" }, "Delete"),
+  );
 };
 Mount(TooltipDemo, "#demo-tooltip");
 ```
@@ -131,11 +130,10 @@ const CombinedDemo = () => {
       Button(
         {
           class: "btn-primary btn-lg",
-          icon: "👍",
           onclick: () => count(count() + 1),
         },
-        "Like",
-      )
+        ["👍", "Like", Icon("icon-[lucide--heart]")],
+      ),
     ),
   );
 };
@@ -154,6 +152,7 @@ const VariantsDemo = () => {
     Button({ class: "btn-accent" }, "Accent"),
     Button({ class: "btn-ghost" }, "Ghost"),
     Button({ class: "btn-outline" }, "Outline"),
+    Button({ class: "btn-disabled" }, "Disabled"),
   ]);
 };
 Mount(VariantsDemo, "#demo-variants");