@juv/codego-react-ui 3.2.4 → 3.2.7

package/dist/index.cjs

@@ -4192,7 +4192,7 @@ function Select({
           ] }, getKey(opt))) }),
           /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "max-h-48 overflow-y-auto p-1", children: options.map((option) => {
             const checked = selectedValues.includes(getKey(option));
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-accent", checked && "bg-primary/8 text-primary"), children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: cn("flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-primary", checked && "bg-primary/8 text-primary"), children: [
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors", checked ? "bg-primary border-primary text-primary-foreground" : "border-slate-900/30 bg-background/50"), children: checked && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react11.Check, { className: "h-3 w-3" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "input",
@@ -4230,7 +4230,7 @@ function Select({
             "aria-required": required,
             "aria-invalid": !!error,
             className: cn(
-              "w-full appearance-none rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 pr-10 h-10 text-sm text-foreground transition-colors hover:bg-background/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+              "w-full appearance-none rounded-xl border border-slate-900/30 bg-background/50 backdrop-blur-sm px-4 py-2 pr-10 h-10 text-sm text-foreground transition-colors hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
               error && "border-destructive focus:ring-destructive"
             ),
             children: [
@@ -4325,8 +4325,8 @@ function Select({
                 "div",
                 {
                   className: cn(
-                    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
-                    (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-accent text-accent-foreground"
+                    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none hover:bg-primary/10 hover:text-primary",
+                    (multiple ? selectedValues.includes(getKey(option)) : value === getKey(option)) && "bg-primary/80 text-primary-foreground"
                   ),
                   onClick: () => handleSelect(getKey(option)),
                   children: [
@@ -6494,6 +6494,23 @@ function ModalShell({ title, onClose, children, footer }) {
     document.body
   );
 }
+var BUILT_IN_PATTERNS = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  url: /^https?:\/\/.+/,
+  numeric: /^\d+(\.\d+)?$/,
+  alpha: /^[a-zA-Z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/
+};
+function validateField(field, value) {
+  if (field.required && (value === "" || value === null || value === void 0))
+    return `${field.label} is required`;
+  if (field.validation && value !== "" && value !== null && value !== void 0) {
+    const pattern = field.validation instanceof RegExp ? field.validation : BUILT_IN_PATTERNS[field.validation];
+    if (pattern && !pattern.test(String(value)))
+      return field.validationMessage ?? `${field.label} is invalid`;
+  }
+  return null;
+}
 function FieldRenderer({ field, value, onChange }) {
   if (field.render) return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: field.render(value, onChange) });
   const strOptions = (field.options ?? []).map(
@@ -6651,7 +6668,8 @@ function EditModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  grid
 }) {
   const [form, setForm] = React28.useState(() => {
     const init = {};
@@ -6660,11 +6678,22 @@ function EditModal({
     });
     return init;
   });
+  const [fieldErrors, setFieldErrors] = React28.useState({});
   const [loading, setLoading] = React28.useState(false);
   const [error, setError] = React28.useState(null);
   const [banner, setBanner] = React28.useState(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
+    const errs = {};
+    fields.forEach((f) => {
+      const msg = validateField(f, form[f.key]);
+      if (msg) errs[f.key] = msg;
+    });
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      return;
+    }
+    setFieldErrors({});
     setLoading(true);
     setError(null);
     try {
@@ -6695,8 +6724,8 @@ function EditModal({
           loading ? "Saving\u2026" : "Save Changes"
         ] })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-        banner && notif && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("form", { onSubmit: handleSubmit, className: grid ? `grid gap-4` : "space-y-4", style: grid ? { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` } : void 0, children: [
+        banner && notif && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "space-y-2", style: grid ? { gridColumn: `1 / -1` } : void 0, children: [
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             NotificationBanner,
             {
@@ -6708,21 +6737,38 @@ function EditModal({
           ),
           notif.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: notif.action })
         ] }),
-        fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-          f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
-            f.label,
-            f.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            FieldRenderer,
-            {
-              field: f,
-              value: form[f.key],
-              onChange: (v) => setForm((prev) => ({ ...prev, [f.key]: v }))
-            }
-          )
-        ] }, f.key)),
-        error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger", children: error })
+        fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "div",
+          {
+            style: {
+              ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {},
+              ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {}
+            },
+            children: [
+              f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
+                f.label,
+                f.required && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                FieldRenderer,
+                {
+                  field: f,
+                  value: form[f.key],
+                  onChange: (v) => {
+                    setForm((prev) => ({ ...prev, [f.key]: v }));
+                    if (fieldErrors[f.key]) {
+                      const msg = validateField(f, v);
+                      setFieldErrors((prev) => ({ ...prev, [f.key]: msg ?? "" }));
+                    }
+                  }
+                }
+              ),
+              fieldErrors[f.key] && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger mt-1", children: fieldErrors[f.key] })
+            ]
+          },
+          f.key
+        )),
+        error && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-danger", style: grid ? { gridColumn: `1 / -1` } : void 0, children: error })
       ] })
     }
   );
@@ -7243,6 +7289,7 @@ function Table({
         baseUrl: defaultActions.baseUrl,
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        grid: defaultActions.editFormGrid,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData(
@@ -7358,6 +7405,40 @@ function useServerDataGrid({ url, params, encrypt, key, decryptPayloadLog, colum
     reload: () => setTick((t) => t + 1)
   };
 }
+function ActionBtn2({
+  cfg,
+  defaultIcon,
+  defaultLabel,
+  defaultVariant,
+  onClick
+}) {
+  const mode = cfg?.displayMode ?? "icon";
+  const icon = cfg?.icon ?? defaultIcon;
+  const label = cfg?.label ?? defaultLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    Button,
+    {
+      type: "button",
+      title: label,
+      size: cfg?.size ?? "xs",
+      variant: cfg?.variant ?? defaultVariant,
+      rounded: cfg?.rounded ?? "lg",
+      gradientFrom: cfg?.gradientFrom,
+      gradientTo: cfg?.gradientTo,
+      gradientDirection: cfg?.gradientDirection,
+      bgColor: cfg?.bgColor,
+      textColor: cfg?.textColor,
+      borderColor: cfg?.borderColor,
+      borderWidth: cfg?.borderWidth,
+      shadow: cfg?.shadow,
+      iconOnly: mode === "icon",
+      leftIcon: mode !== "text" ? icon : void 0,
+      className: cfg?.className,
+      onClick,
+      children: mode !== "icon" ? label : void 0
+    }
+  );
+}
 function DGModalShell({ title, onClose, children, footer }) {
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -7473,7 +7554,8 @@ function DGEditModal({
   itemId,
   onClose,
   onSuccess,
-  notif
+  notif,
+  grid
 }) {
   const [form, setForm] = React29.useState(() => {
     const init = {};
@@ -7482,11 +7564,22 @@ function DGEditModal({
     });
     return init;
   });
+  const [fieldErrors, setFieldErrors] = React29.useState({});
   const [loading, setLoading] = React29.useState(false);
   const [error, setError] = React29.useState(null);
   const [banner, setBanner] = React29.useState(false);
   const handleSubmit = async (e) => {
     e.preventDefault();
+    const errs = {};
+    fields.forEach((f) => {
+      const msg = validateField(f, form[f.key]);
+      if (msg) errs[f.key] = msg;
+    });
+    if (Object.keys(errs).length) {
+      setFieldErrors(errs);
+      return;
+    }
+    setFieldErrors({});
     setLoading(true);
     setError(null);
     try {
@@ -7517,27 +7610,26 @@ function DGEditModal({
           loading ? "Saving\u2026" : "Save Changes"
         ] })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
-        banner && notif && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            NotificationBanner,
-            {
-              variant: notif.editVariant ?? "success",
-              title: notif.editTitle ?? "Record updated",
-              description: notif.editBody,
-              onClose: () => setBanner(false)
-            }
-          ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("form", { onSubmit: handleSubmit, className: grid ? "grid gap-4" : "space-y-4", style: grid ? { gridTemplateColumns: `repeat(${grid}, minmax(0, 1fr))` } : void 0, children: [
+        banner && notif && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "space-y-2", style: grid ? { gridColumn: "1 / -1" } : void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NotificationBanner, { variant: notif.editVariant ?? "success", title: notif.editTitle ?? "Record updated", description: notif.editBody, onClose: () => setBanner(false) }),
           notif.action && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: notif.action })
         ] }),
-        fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+        fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { ...f.colSpan ? { gridColumn: `span ${f.colSpan}` } : {}, ...f.rowSpan ? { gridRow: `span ${f.rowSpan}` } : {} }, children: [
           f.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { className: "block text-xs font-semibold text-muted-foreground mb-1", children: [
             f.label,
             f.required && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGFieldRenderer, { field: f, value: form[f.key], onChange: (v) => setForm((p) => ({ ...p, [f.key]: v })) })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DGFieldRenderer, { field: f, value: form[f.key], onChange: (v) => {
+            setForm((p) => ({ ...p, [f.key]: v }));
+            if (fieldErrors[f.key]) {
+              const msg = validateField(f, v);
+              setFieldErrors((p) => ({ ...p, [f.key]: msg ?? "" }));
+            }
+          } }),
+          fieldErrors[f.key] && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger mt-1", children: fieldErrors[f.key] })
         ] }, f.key)),
-        error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger", children: error })
+        error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-danger", style: grid ? { gridColumn: "1 / -1" } : void 0, children: error })
       ] })
     }
   );
@@ -7588,6 +7680,7 @@ function DataGrid({
   columns,
   data,
   rowKey,
+  filterable,
   selectable = false,
   selected: controlledSelected,
   onSelectChange,
@@ -7683,7 +7776,7 @@ function DataGrid({
     header: "Actions",
     render: (row) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ActionBtn,
+        ActionBtn2,
         {
           cfg: defaultActions.viewButton,
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Eye, { className: "h-3.5 w-3.5" }),
@@ -7693,7 +7786,7 @@ function DataGrid({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ActionBtn,
+        ActionBtn2,
         {
           cfg: defaultActions.editButton,
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Pencil, { className: "h-3.5 w-3.5" }),
@@ -7703,7 +7796,7 @@ function DataGrid({
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ActionBtn,
+        ActionBtn2,
         {
           cfg: defaultActions.deleteButton,
           defaultIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Trash, { className: "h-3.5 w-3.5" }),
@@ -7713,7 +7806,7 @@ function DataGrid({
         }
       ),
       defaultActions.extraActions?.map((extra) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-        ActionBtn,
+        ActionBtn2,
         {
           cfg: extra,
           defaultIcon: extra.icon,
@@ -7795,9 +7888,9 @@ function DataGrid({
             `${String(col.key)}-${ci}`
           ))
         ] }),
-        visibleCols.some((c) => c.filterable) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { className: "border-b border-border bg-muted/10", children: [
+        filterable && filterable.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("tr", { className: "border-b border-border bg-muted/10", children: [
           selectable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", {}),
-          visibleCols.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-3 py-1.5", children: col.filterable && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
+          visibleCols.map((col, ci) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("th", { className: "px-3 py-1.5", children: filterable.includes(String(col.key)) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative", children: [
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-muted-foreground" }),
             /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "input",
@@ -7932,6 +8025,7 @@ function DataGrid({
         baseUrl: defaultActions.baseUrl,
         itemId: String(editItem[actionIdKey] ?? ""),
         notif: defaultActions.onSuccessNotif,
+        grid: defaultActions.editFormGrid,
         onClose: () => setEditItem(null),
         onSuccess: (updated) => {
           setTableData((prev) => prev.map((r) => String(r[actionIdKey]) === String(updated[actionIdKey]) ? updated : r));
@@ -10232,12 +10326,14 @@ var settingConfig_default = {
       primaryHover: "#73F3E2",
       secondary: "#171717",
       secondaryHover: "#262626",
-      info: "#3b82f6",
-      infoHover: "#2563eb",
+      info: "#F59E0B",
+      infoHover: "#D97706",
       warning: "#f59e0b",
       warningHover: "#d97706",
       danger: "#ef4444",
-      dangerHover: "#dc2626"
+      dangerHover: "#dc2626",
+      accent: "#F59E0B",
+      accentHover: "#D97706"
     }
   },
   themeOptions: [
@@ -10247,9 +10343,15 @@ var settingConfig_default = {
   ],
   fontSizes: [
     { "14px": "Small (14px)" },
+    { "15px": "Small (15px)" },
     { "16px": "Medium (16px)" },
+    { "17px": "Medium (17px)" },
     { "18px": "Large (18px)" },
-    { "20px": "Extra Large (20px)" }
+    { "19px": "Large (19px)" },
+    { "20px": "Extra Large (20px)" },
+    { "21px": "Extra Large (21px)" },
+    { "22px": "Extra Large (22px)" },
+    { "24px": "2X Extra Large (24px)" }
   ],
   fontFamilies: [
     { '"Space Grotesk", "Inter", sans-serif': "Space Grotesk" },
@@ -10262,296 +10364,393 @@ var settingConfig_default = {
     { base: "secondary", hover: "secondaryHover", label: "Secondary" },
     { base: "info", hover: "infoHover", label: "Info" },
     { base: "warning", hover: "warningHover", label: "Warning" },
-    { base: "danger", hover: "dangerHover", label: "Danger" }
+    { base: "danger", hover: "dangerHover", label: "Danger" },
+    { base: "accent", hover: "accentHover", label: "accent" }
   ],
   colorPalette: [
     {
       base: "#6366F1",
       hover: "#4F46E5",
       info: "#F59E0B",
-      infoHover: "#D97706"
+      infoHover: "#D97706",
+      accent: "#F59E0B",
+      accentHover: "#D97706"
     },
     {
       base: "#818CF8",
       hover: "#6366F1",
       info: "#FBBF24",
-      infoHover: "#F59E0B"
+      infoHover: "#F59E0B",
+      accent: "#FBBF24",
+      accentHover: "#F59E0B"
     },
     {
       base: "#4F46E5",
       hover: "#4338CA",
       info: "#F59E0B",
-      infoHover: "#D97706"
+      infoHover: "#D97706",
+      accent: "#F59E0B",
+      accentHover: "#D97706"
     },
     {
       base: "#3730A3",
       hover: "#312E81",
       info: "#D97706",
-      infoHover: "#B45309"
+      infoHover: "#B45309",
+      accent: "#D97706",
+      accentHover: "#B45309"
     },
     {
       base: "#7C3AED",
       hover: "#6D28D9",
       info: "#F97316",
-      infoHover: "#EA580C"
+      infoHover: "#EA580C",
+      accent: "#F97316",
+      accentHover: "#EA580C"
     },
     {
       base: "#A78BFA",
       hover: "#8B5CF6",
       info: "#FB923C",
-      infoHover: "#F97316"
+      infoHover: "#F97316",
+      accent: "#FB923C",
+      accentHover: "#F97316"
     },
     {
       base: "#8B5CF6",
       hover: "#7C3AED",
       info: "#F97316",
-      infoHover: "#EA580C"
+      infoHover: "#EA580C",
+      accent: "#F97316",
+      accentHover: "#EA580C"
     },
     {
       base: "#6D28D9",
       hover: "#5B21B6",
       info: "#EA580C",
-      infoHover: "#C2410C"
+      infoHover: "#C2410C",
+      accent: "#EA580C",
+      accentHover: "#C2410C"
     },
     {
       base: "#0EA5E9",
       hover: "#0284C7",
       info: "#F97316",
-      infoHover: "#EA580C"
+      infoHover: "#EA580C",
+      accent: "#F97316",
+      accentHover: "#EA580C"
     },
     {
       base: "#38BDF8",
       hover: "#0EA5E9",
       info: "#FB923C",
-      infoHover: "#F97316"
+      infoHover: "#F97316",
+      accent: "#FB923C",
+      accentHover: "#F97316"
     },
     {
       base: "#3B82F6",
       hover: "#2563EB",
       info: "#F59E0B",
-      infoHover: "#D97706"
+      infoHover: "#D97706",
+      accent: "#F59E0B",
+      accentHover: "#D97706"
     },
     {
       base: "#1D4ED8",
       hover: "#1E40AF",
       info: "#D97706",
-      infoHover: "#B45309"
+      infoHover: "#B45309",
+      accent: "#D97706",
+      accentHover: "#B45309"
     },
     {
       base: "#06B6D4",
       hover: "#0891B2",
       info: "#A855F7",
-      infoHover: "#9333EA"
+      infoHover: "#9333EA",
+      accent: "#A855F7",
+      accentHover: "#9333EA"
     },
     {
       base: "#22D3EE",
       hover: "#06B6D4",
       info: "#C084FC",
-      infoHover: "#A855F7"
+      infoHover: "#A855F7",
+      accent: "#C084FC",
+      accentHover: "#A855F7"
     },
     {
       base: "#14B8A6",
       hover: "#0F766E",
       info: "#8B5CF6",
-      infoHover: "#7C3AED"
+      infoHover: "#7C3AED",
+      accent: "#8B5CF6",
+      accentHover: "#7C3AED"
     },
     {
       base: "#0D9488",
       hover: "#0F766E",
       info: "#7C3AED",
-      infoHover: "#6D28D9"
+      infoHover: "#6D28D9",
+      accent: "#7C3AED",
+      accentHover: "#6D28D9"
     },
     {
       base: "#10B981",
       hover: "#059669",
       info: "#8B5CF6",
-      infoHover: "#7C3AED"
+      infoHover: "#7C3AED",
+      accent: "#8B5CF6",
+      accentHover: "#7C3AED"
     },
     {
       base: "#34D399",
       hover: "#10B981",
       info: "#A855F7",
-      infoHover: "#9333EA"
+      infoHover: "#9333EA",
+      accent: "#A855F7",
+      accentHover: "#9333EA"
     },
     {
       base: "#22C55E",
       hover: "#16A34A",
       info: "#7C3AED",
-      infoHover: "#6D28D9"
+      infoHover: "#6D28D9",
+      accent: "#7C3AED",
+      accentHover: "#6D28D9"
     },
     {
       base: "#16A34A",
       hover: "#15803D",
       info: "#6D28D9",
-      infoHover: "#5B21B6"
+      infoHover: "#5B21B6",
+      accent: "#6D28D9",
+      accentHover: "#5B21B6"
     },
     {
       base: "#84CC16",
       hover: "#65A30D",
       info: "#6366F1",
-      infoHover: "#4F46E5"
+      infoHover: "#4F46E5",
+      accent: "#6366F1",
+      accentHover: "#4F46E5"
     },
     {
       base: "#A3E635",
       hover: "#84CC16",
       info: "#818CF8",
-      infoHover: "#6366F1"
+      infoHover: "#6366F1",
+      accent: "#818CF8",
+      accentHover: "#6366F1"
     },
     {
       base: "#65A30D",
       hover: "#4D7C0F",
       info: "#4F46E5",
-      infoHover: "#4338CA"
+      infoHover: "#4338CA",
+      accent: "#4F46E5",
+      accentHover: "#4338CA"
     },
     {
       base: "#4D7C0F",
       hover: "#3F6212",
       info: "#3730A3",
-      infoHover: "#312E81"
+      infoHover: "#312E81",
+      accent: "#3730A3",
+      accentHover: "#312E81"
     },
     {
       base: "#EAB308",
       hover: "#CA8A04",
       info: "#3B82F6",
-      infoHover: "#2563EB"
+      infoHover: "#2563EB",
+      accent: "#3B82F6",
+      accentHover: "#2563EB"
     },
     {
       base: "#FACC15",
       hover: "#EAB308",
       info: "#60A5FA",
-      infoHover: "#3B82F6"
+      infoHover: "#3B82F6",
+      accent: "#60A5FA",
+      accentHover: "#3B82F6"
     },
     {
       base: "#F59E0B",
       hover: "#D97706",
       info: "#2563EB",
-      infoHover: "#1D4ED8"
+      infoHover: "#1D4ED8",
+      accent: "#2563EB",
+      accentHover: "#1D4ED8"
     },
     {
       base: "#D97706",
       hover: "#B45309",
       info: "#1D4ED8",
-      infoHover: "#1E40AF"
+      infoHover: "#1E40AF",
+      accent: "#1D4ED8",
+      accentHover: "#1E40AF"
     },
     {
       base: "#F97316",
       hover: "#EA580C",
       info: "#0EA5E9",
-      infoHover: "#0284C7"
+      infoHover: "#0284C7",
+      accent: "#0EA5E9",
+      accentHover: "#0284C7"
     },
     {
       base: "#FB923C",
       hover: "#F97316",
       info: "#38BDF8",
-      infoHover: "#0EA5E9"
+      infoHover: "#0EA5E9",
+      accent: "#38BDF8",
+      accentHover: "#0EA5E9"
     },
     {
       base: "#EA580C",
       hover: "#C2410C",
       info: "#0284C7",
-      infoHover: "#0369A1"
+      infoHover: "#0369A1",
+      accent: "#0284C7",
+      accentHover: "#0369A1"
     },
     {
       base: "#C2410C",
       hover: "#9A3412",
       info: "#0369A1",
-      infoHover: "#075985"
+      infoHover: "#075985",
+      accent: "#0369A1",
+      accentHover: "#075985"
     },
     {
       base: "#EF4444",
       hover: "#DC2626",
       info: "#0EA5E9",
-      infoHover: "#0284C7"
+      infoHover: "#0284C7",
+      accent: "#0EA5E9",
+      accentHover: "#0284C7"
     },
     {
       base: "#F87171",
       hover: "#EF4444",
       info: "#38BDF8",
-      infoHover: "#0EA5E9"
+      infoHover: "#0EA5E9",
+      accent: "#38BDF8",
+      accentHover: "#0EA5E9"
     },
     {
       base: "#DC2626",
       hover: "#B91C1C",
       info: "#0284C7",
-      infoHover: "#0369A1"
+      infoHover: "#0369A1",
+      accent: "#0284C7",
+      accentHover: "#0369A1"
     },
     {
       base: "#B91C1C",
       hover: "#991B1B",
       info: "#0369A1",
-      infoHover: "#075985"
+      infoHover: "#075985",
+      accent: "#0369A1",
+      accentHover: "#075985"
     },
     {
       base: "#F43F5E",
       hover: "#E11D48",
       info: "#0EA5E9",
-      infoHover: "#0284C7"
+      infoHover: "#0284C7",
+      accent: "#0EA5E9",
+      accentHover: "#0284C7"
     },
     {
       base: "#FB7185",
       hover: "#F43F5E",
       info: "#38BDF8",
-      infoHover: "#0EA5E9"
+      infoHover: "#0EA5E9",
+      accent: "#38BDF8",
+      accentHover: "#0EA5E9"
     },
     {
       base: "#E11D48",
       hover: "#BE123C",
       info: "#0284C7",
-      infoHover: "#0369A1"
+      infoHover: "#0369A1",
+      accent: "#0284C7",
+      accentHover: "#0369A1"
     },
     {
       base: "#BE123C",
       hover: "#9F1239",
       info: "#0369A1",
-      infoHover: "#075985"
+      infoHover: "#075985",
+      accent: "#0369A1",
+      accentHover: "#075985"
     },
     {
       base: "#EC4899",
       hover: "#DB2777",
       info: "#06B6D4",
-      infoHover: "#0891B2"
+      infoHover: "#0891B2",
+      accent: "#06B6D4",
+      accentHover: "#0891B2"
     },
     {
       base: "#F472B6",
       hover: "#EC4899",
       info: "#22D3EE",
-      infoHover: "#06B6D4"
+      infoHover: "#06B6D4",
+      accent: "#22D3EE",
+      accentHover: "#06B6D4"
     },
     {
       base: "#DB2777",
       hover: "#BE185D",
       info: "#0891B2",
-      infoHover: "#0E7490"
+      infoHover: "#0E7490",
+      accent: "#0891B2",
+      accentHover: "#0E7490"
     },
     {
       base: "#BE185D",
       hover: "#9D174D",
       info: "#0E7490",
-      infoHover: "#155E75"
+      infoHover: "#155E75",
+      accent: "#0E7490",
+      accentHover: "#155E75"
     },
     {
       base: "#D946EF",
       hover: "#C026D3",
       info: "#F59E0B",
-      infoHover: "#D97706"
+      infoHover: "#D97706",
+      accent: "#F59E0B",
+      accentHover: "#D97706"
     },
     {
       base: "#E879F9",
       hover: "#D946EF",
       info: "#FBBF24",
-      infoHover: "#F59E0B"
+      infoHover: "#F59E0B",
+      accent: "#FBBF24",
+      accentHover: "#F59E0B"
     },
     {
       base: "#C026D3",
       hover: "#A21CAF",
       info: "#D97706",
-      infoHover: "#B45309"
+      infoHover: "#B45309",
+      accent: "#D97706",
+      accentHover: "#B45309"
     },
     {
       base: "#A21CAF",
       hover: "#86198F",
       info: "#B45309",
-      infoHover: "#92400E"
+      infoHover: "#92400E",
+      accent: "#B45309",
+      accentHover: "#92400E"
     }
   ]
 };
@@ -11341,8 +11540,8 @@ function ColorsPanel({ onColorsChange }) {
           type: "button",
           title: c.base,
           onClick: () => {
-            setColors({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover });
-            onColorsChange?.({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover });
+            setColors({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover, accent: c.accent, accentHover: c.accentHover });
+            onColorsChange?.({ primary: c.base, primaryHover: c.hover, info: c.info, infoHover: c.infoHover, accent: c.accent, accentHover: c.accentHover });
           },
           className: cn(
             "h-7 w-full rounded-md border border-white/10 transition-transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring",