changed to new functions

docs/components/button.md

@@ -48,7 +48,7 @@ Button({ class: "btn-primary btn-lg btn-circle gap-4" }, "Click Me");
 const BasicDemo = () => {
   return Button({ class: "btn-primary" }, "Click Me");
 };
-Mount(BasicDemo, "#demo-basic");
+mount(BasicDemo, "#demo-basic");
 ```
 
 ### With Loading State
@@ -69,10 +69,10 @@ const LoadingDemo = () => {
         isSaving(false);
       },
     },
-    [If(isSaving, ()=>Loading()), "Save Changes"],
+    [when(isSaving, ()=>Loading()), "Save Changes"],
   );
 };
-Mount(LoadingDemo, "#demo-loading");
+mount(LoadingDemo, "#demo-loading");
 ```
 
 ### With Icon
@@ -85,7 +85,7 @@ const IconDemo = () => {
     Button({ class: "btn-primary" }, [Icon("icon-[lucide--x]"), "Favorite"]),
   ]);
 };
-Mount(IconDemo, "#demo-icon");
+mount(IconDemo, "#demo-icon");
 ```
 
 ### With Badge (using Indicator)
@@ -99,7 +99,7 @@ const BadgeDemo = () => {
     Button({ class: "btn-outline" }, "Notifications"),
   );
 };
-Mount(BadgeDemo, "#demo-badge");
+mount(BadgeDemo, "#demo-badge");
 ```
 
 ### With Tooltip
@@ -113,7 +113,7 @@ const TooltipDemo = () => {
     Button({ class: "btn-ghost" }, "Delete"),
   );
 };
-Mount(TooltipDemo, "#demo-tooltip");
+mount(TooltipDemo, "#demo-tooltip");
 ```
 
 ### Combined (Badge + Tooltip)
@@ -137,7 +137,7 @@ const CombinedDemo = () => {
     ),
   );
 };
-Mount(CombinedDemo, "#demo-combined");
+mount(CombinedDemo, "#demo-combined");
 ```
 
 ### All Color Variants
@@ -155,5 +155,5 @@ const VariantsDemo = () => {
     Button({ class: "btn-disabled" }, "Disabled"),
   ]);
 };
-Mount(VariantsDemo, "#demo-variants");
+mount(VariantsDemo, "#demo-variants");
 ```