Update new functions

src/components/Colorpicker.js

@@ -1,5 +1,5 @@
 // components/Colorpicker.js
-import { $, $html, $if } from "../sigpro.js";
+import { $, Tag, If } from "../sigpro.js";
 import { val, ui } from "../core/utils.js";
 
 /**
@@ -30,8 +30,8 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  return $html("div", { class: ui('relative w-fit', className) }, [
-    $html(
+  return Tag("div", { class: ui('relative w-fit', className) }, [
+    Tag(
       "button",
       {
         type: "button",
@@ -43,27 +43,27 @@ export const Colorpicker = (props) => {
         ...rest,
       },
       [
-        $html("div", {
+        Tag("div", {
           class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
           style: () => `background-color: ${getColor()}`,
         }),
-        label ? $html("span", { class: "opacity-80" }, label) : null,
+        label ? Tag("span", { class: "opacity-80" }, label) : null,
       ],
     ),
 
-    $if(isOpen, () =>
-      $html(
+    If(isOpen, () =>
+      Tag(
         "div",
         {
           class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
           onclick: (e) => e.stopPropagation(),
         },
         [
-          $html(
+          Tag(
             "div",
             { class: "grid grid-cols-8 gap-1" },
             palette.map((c) =>
-              $html("button", {
+              Tag("button", {
                 type: "button",
                 style: `background-color: ${c}`,
                 class: () => {
@@ -82,8 +82,8 @@ export const Colorpicker = (props) => {
       ),
     ),
 
-    $if(isOpen, () =>
-      $html("div", {
+    If(isOpen, () =>
+      Tag("div", {
         class: "fixed inset-0 z-[100]",
         onclick: () => isOpen(false),
       }),