changed to new functions

components/colorpicker.js

@@ -1,5 +1,5 @@
 // components/Colorpicker.js
-import { $, Tag, If } from "sigpro";
+import { $, h, when} from "sigpro";
 
 export const Colorpicker = (props) => {
   const isOpen = $(false);
@@ -20,28 +20,28 @@ export const Colorpicker = (props) => {
     return (typeof v === "function" ? v() : v) || "#000000";
   };
 
-  return Tag("div", { class: `relative w-fit ${props.class ?? ''}` }, [
-    Tag("button", {
+  return h("div", { class: `relative w-fit ${props.class ?? ''}` }, [
+    h("button", {
       type: "button",
       class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
       onclick: (e) => { e.stopPropagation(); isOpen(!isOpen()); },
       ...props
     }, [
-      Tag("div", {
+      h("div", {
         class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
         style: () => `background-color: ${getColor()}`
       }),
-      props.label ? Tag("span", { class: "opacity-80" }, props.label) : null
+      props.label ? h("span", { class: "opacity-80" }, props.label) : null
     ]),
 
-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("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()
       }, [
-        Tag("div", { class: "grid grid-cols-8 gap-1" },
+        h("div", { class: "grid grid-cols-8 gap-1" },
           palette.map(c =>
-            Tag("button", {
+            h("button", {
               type: "button",
               style: `background-color: ${c}`,
               class: () => {
@@ -58,8 +58,8 @@ export const Colorpicker = (props) => {
       ])
     ),
 
-    If(isOpen, () =>
-      Tag("div", {
+    when(isOpen, () =>
+      h("div", {
         class: "fixed inset-0 z-[100]",
         onclick: () => isOpen(false)
       })