Updateing Docs

src/components/Colorpicker.js

@@ -1,9 +1,20 @@
+// components/Colorpicker.js
 import { $, $html, $if } from "sigpro";
-import { val } from "../core/utils.js";
+import { val, ui } from "../core/utils.js";
 
-/** COLORPICKER */
+/**
+ * Colorpicker component
+ * 
+ * daisyUI classes used:
+ * - btn, btn-primary, btn-secondary, btn-accent, btn-ghost
+ * - bg-base-100, border, border-base-300, shadow-sm, shadow-2xl
+ * - rounded-box, rounded-sm, fixed, inset-0
+ * - z-50, z-110, absolute, left-0, mt-2, p-3, w-64
+ * - grid, grid-cols-8, gap-1, ring, ring-offset-1, ring-primary
+ * - scale-110, transition-all, hover:scale-125, active:scale-95
+ */
 export const Colorpicker = (props) => {
-  const { value, label, ...rest } = props;
+  const { class: className, value, label, ...rest } = props;
   const isOpen = $(false);
 
   const palette = [
@@ -19,7 +30,7 @@ export const Colorpicker = (props) => {
 
   const getColor = () => val(value) || "#000000";
 
-  return $html("div", { class: "relative w-fit" }, [
+  return $html("div", { class: ui('relative w-fit', className) }, [
     $html(
       "button",
       {
@@ -78,4 +89,4 @@ export const Colorpicker = (props) => {
       }),
     ),
   ]);
-};
+};