Colorpicker

src/App.js

@@ -44,6 +44,7 @@ const Profile = (params) => {
   const miRango = $();
   const selectedFruit = $("Apple");
   const fruits = ["Apple", "Banana", "Cherry", "Dragonfruit", "Elderberry"];
+  const colorFondo = $("#ef4444");
 
   const textoInput = $(() => {
     const f = miFecha;
@@ -61,6 +62,7 @@ const Profile = (params) => {
     }),
     Datepicker({ $value: miFecha, label: "Fecha", placeholder: textoInput }),
     Datepicker({ $value: miRango, label: "Fecha", placeholder: textoInput, range: true }),
+    Colorpicker({ label: "Color del tema", $value: colorFondo, placeholder: "Elige un color..." }),
     Input({ type: "number", label: "Number" }),
     Input({ type: "email", label: "Email" }),
     Input({ label: "Text" }),

src/sigpro-ui.js

@@ -561,6 +561,83 @@ export const UI = ($, defaultLang = "es") => {
     ]);
   };
 
+  /** COLORPICKER  */
+  ui.Colorpicker = (props) => {
+    const { $value, label, placeholder, ...rest } = props;
+    const isOpen = $(false);
+
+    const p1 = ["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"];
+    const p2 = ["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"];
+    const p3 = ["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"];
+    const p4 = ["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"];
+    const p5 = ["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"];
+    const p6 = ["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"];
+    const p7 = ["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"];
+    const p8 = ["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"];
+
+    const palette = [...p1, ...p2, ...p3, ...p4, ...p5, ...p6, ...p7, ...p8];
+
+    const getColor = () => val($value) || "#000000";
+
+    return $.html("div", { class: "relative w-full" }, [
+      ui.Input({
+        label,
+        $value,
+        readonly: true,
+        placeholder: placeholder || "#000000",
+        class: "cursor-pointer font-mono uppercase",
+        onclick: (e) => {
+          e.stopPropagation();
+          isOpen(!isOpen());
+        },
+        icon: () =>
+          $.html("div", {
+            class: "size-5 rounded shadow-inner border border-base-content/10 transition-colors",
+            style: `background-color: ${getColor()}`,
+          }),
+        ...rest,
+      }),
+
+      ui.If(isOpen, () =>
+        $.html(
+          "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(
+              "div",
+              { class: "grid grid-cols-8 gap-1" },
+              palette.map((c) =>
+                $.html("button", {
+                  type: "button",
+                  style: `background-color: ${c}`,
+                  class: () => {
+                    const active = getColor().toLowerCase() === c.toLowerCase();
+                    return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 
+              ${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
+                  },
+                  onclick: () => {
+                    $value(c);
+                    isOpen(false);
+                  },
+                }),
+              ),
+            )
+          ],
+        ),
+      ),
+
+      ui.If(isOpen, () =>
+        $.html("div", {
+          class: "fixed inset-0 z-[100]",
+          onclick: () => isOpen(false),
+        }),
+      ),
+    ]);
+  };
+
   /** CHECKBOX */
   ui.CheckBox = (props) => {
     const { $value, tooltip, toggle, ...rest } = props;