From 6392457ffb69e56f9779747411c14f80730946b5 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <devops@tben.me>
Date: Mon, 23 Mar 2026 06:30:43 +0100
Subject: [PATCH] Updates

---
 components/composites/docs/TWUIDocsAside.tsx |   2 +-
 components/editors/TinyMCE/index.tsx         |   5 +-
 components/form/Input/NumberInputButtons.tsx |   2 +-
 components/layout/Button.tsx                 | 254 +++++++++----------
 components/utils/fetch/fetchApi.ts           |  13 +-
 5 files changed, 129 insertions(+), 147 deletions(-)

diff --git a/components/composites/docs/TWUIDocsAside.tsx b/components/composites/docs/TWUIDocsAside.tsx
index 98e52fe..134f1f6 100644
--- a/components/composites/docs/TWUIDocsAside.tsx
+++ b/components/composites/docs/TWUIDocsAside.tsx
@@ -22,7 +22,7 @@ export default function TWUIDocsAside({
             {...props}
             className={twMerge(
                 "pb-10 hidden xl:flex sticky top-6",
-                props.className
+                props.className,
             )}
         >
             <Stack>
diff --git a/components/editors/TinyMCE/index.tsx b/components/editors/TinyMCE/index.tsx
index 5f9b885..6884487 100644
--- a/components/editors/TinyMCE/index.tsx
+++ b/components/editors/TinyMCE/index.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, MutableRefObject } from "react";
 import { RawEditorOptions, TinyMCE, Editor } from "./tinymce";
 import { twMerge } from "tailwind-merge";
 import twuiSlugToNormalText from "../../utils/slug-to-normal-text";
@@ -49,7 +49,8 @@ export default function TinyMCEEditor<KeyType extends string>({
     const { tinyMCE } = useTinyMCE();
 
     const editorComponentRef = React.useRef<HTMLDivElement>(null);
-    const editorRef = passedEditorRef || React.useRef<Editor>(null);
+    const editorRef: MutableRefObject<Editor | null> =
+        passedEditorRef || React.useRef(null);
 
     const EDITOR_VALUE_CHANGE_TIMEOUT = 500;
 
diff --git a/components/form/Input/NumberInputButtons.tsx b/components/form/Input/NumberInputButtons.tsx
index e9bdf03..1f5333a 100644
--- a/components/form/Input/NumberInputButtons.tsx
+++ b/components/form/Input/NumberInputButtons.tsx
@@ -10,7 +10,7 @@ let pressTimeout: any;
 type Props = Pick<InputProps<any>, "min" | "max" | "step" | "decimal"> & {
     value: string;
     setValue: React.Dispatch<React.SetStateAction<string>>;
-    buttonDownRef: React.RefObject<boolean>;
+    buttonDownRef: React.MutableRefObject<boolean>;
     inputRef: React.RefObject<HTMLInputElement | null>;
 };
 
diff --git a/components/layout/Button.tsx b/components/layout/Button.tsx
index 98f3919..304305c 100644
--- a/components/layout/Button.tsx
+++ b/components/layout/Button.tsx
@@ -44,6 +44,122 @@ export type TWUIButtonProps = DetailedHTMLProps<
     loadingProps?: ComponentProps<typeof Loading>;
 };
 
+const buttonClasses: Record<string, Record<string, string>> = {
+    normal: {
+        primary: twMerge(
+            "bg-primary hover:bg-primary-hover text-white",
+            "dark:bg-primary-dark hover:dark:bg-primary-dark-hover",
+            "twui-button-primary",
+        ),
+        secondary: twMerge(
+            "bg-secondary hover:bg-secondary-hover text-white",
+            "twui-button-secondary",
+        ),
+        white: twMerge(
+            "!bg-white hover:!bg-slate-200 !text-slate-800",
+            "twui-button-white",
+        ),
+        accent: twMerge(
+            "bg-accent hover:bg-accent-hover text-white",
+            "twui-button-accent",
+        ),
+        gray: twMerge(
+            "bg-gray hover:bg-gray-hover text-foreground-light",
+            "dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
+            "twui-button-gray",
+        ),
+        success: twMerge(
+            "bg-success hover:bg-success-hover text-white",
+            "dark:bg-success hover:dark:bg-success-hover",
+            "twui-button-success",
+        ),
+        error: twMerge(
+            "bg-error hover:bg-error-hover text-white",
+            "dark:bg-error hover:dark:bg-error-hover",
+            "twui-button-error",
+        ),
+    },
+    outlined: {
+        primary: twMerge(
+            "bg-transparent outline outline-1 outline-primary",
+            "text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
+            "twui-button-primary-outlined",
+        ),
+        secondary: twMerge(
+            "bg-transparent outline outline-1 outline-secondary",
+            "text-secondary",
+            "twui-button-secondary-outlined",
+        ),
+        accent: twMerge(
+            "bg-transparent outline outline-1 outline-accent",
+            "text-accent",
+            "twui-button-accent-outlined",
+        ),
+        gray: twMerge(
+            "bg-transparent outline outline-1 outline-slate-300",
+            "text-slate-600 dark:text-white/60 dark:outline-white/30",
+            "twui-button-gray-outlined",
+        ),
+        white: twMerge(
+            "bg-transparent outline outline-1 outline-white/50",
+            "text-white",
+            "twui-button-white-outlined",
+        ),
+        error: twMerge(
+            "bg-transparent outline outline-1 outline-error text-error",
+            "dark:outline-error dark:text-error-dark",
+            "twui-button-error-outlined",
+        ),
+    },
+    ghost: {
+        primary: twMerge(
+            "bg-transparent dark:bg-transparent outline-none p-2",
+            "text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
+            "twui-button-primary-ghost",
+        ),
+        secondary: twMerge(
+            "bg-transparent dark:bg-transparent outline-none p-2",
+            "text-secondary hover:bg-transparent dark:hover:bg-transparent",
+            "twui-button-secondary-ghost",
+        ),
+        text: twMerge(
+            "bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
+            "text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
+            "twui-button-secondary-ghost",
+        ),
+        accent: twMerge(
+            "bg-transparent dark:bg-transparent outline-none p-2",
+            "text-accent hover:bg-transparent dark:hover:bg-transparent",
+            "twui-button-accent-ghost",
+        ),
+        gray: twMerge(
+            "bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
+            "text-slate-600 dark:text-white/70 hover:opacity-80",
+            "twui-button-gray-ghost",
+        ),
+        error: twMerge(
+            "bg-transparent outline-none p-2",
+            "text-red-600 dark:text-red-400",
+            "twui-button-error-ghost",
+        ),
+        warning: twMerge(
+            "bg-transparent outline-none p-2",
+            "text-yellow-600",
+            "twui-button-warning-ghost",
+        ),
+        success: twMerge(
+            "bg-transparent outline-none p-2",
+            "text-success",
+            "twui-button-success-ghost",
+        ),
+        white: twMerge(
+            "bg-transparent outline-none p-2",
+            "text-white",
+            "twui-button-white-ghost",
+        ),
+    },
+};
+
 /**
  * # Buttons
  * @className twui-button-general
@@ -112,143 +228,7 @@ export default function Button({
     loadingProps,
     ...props
 }: TWUIButtonProps) {
-    const finalClassName: string = (() => {
-        if (variant == "normal" || !variant) {
-            if (color == "primary" || !color)
-                return twMerge(
-                    "bg-primary hover:bg-primary-hover text-white",
-                    "dark:bg-primary-dark hover:dark:bg-primary-dark-hover text-white",
-                    "twui-button-primary",
-                );
-            if (color == "secondary")
-                return twMerge(
-                    "bg-secondary hover:bg-secondary-hover text-white",
-                    "twui-button-secondary",
-                );
-            if (color == "white")
-                return twMerge(
-                    "!bg-white hover:!bg-slate-200 !text-slate-800",
-                    "twui-button-white",
-                );
-            if (color == "accent")
-                return twMerge(
-                    "bg-accent hover:bg-accent-hover text-white",
-                    "twui-button-accent",
-                );
-            if (color == "gray")
-                return twMerge(
-                    "bg-gray hover:bg-gray-hover text-foreground-light",
-                    "dark:bg-gray-dark hover:dark:bg-gray-dark-hover dark:text-foreground-dark",
-                    "twui-button-gray",
-                );
-            if (color == "success")
-                return twMerge(
-                    "bg-success hover:bg-success-hover text-white",
-                    "dark:bg-success hover:dark:bg-success-hover text-white",
-                    "twui-button-success",
-                );
-            if (color == "error")
-                return twMerge(
-                    "bg-error hover:bg-error-hover text-white",
-                    "dark:bg-error hover:dark:bg-error-hover text-white",
-                    "twui-button-error",
-                );
-        } else if (variant == "outlined") {
-            if (color == "primary" || !color)
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-primary",
-                    "text-primary-text dark:text-primary-dark-text dark:outline-primary-dark-outline",
-                    "twui-button-primary-outlined",
-                );
-            if (color == "secondary")
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-secondary",
-                    "text-secondary",
-                    "twui-button-secondary-outlined",
-                );
-            if (color == "accent")
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-accent",
-                    "text-accent",
-                    "twui-button-accent-outlined",
-                );
-            if (color == "gray")
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-slate-300",
-                    "text-slate-600 dark:text-white/60 dark:outline-white/30",
-                    "twui-button-gray-outlined",
-                );
-            if (color == "white")
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-white/50",
-                    "text-white",
-                    "twui-button-white-outlined",
-                );
-            if (color == "error")
-                return twMerge(
-                    "bg-transparent outline outline-1 outline-error text-error",
-                    "dark:outline-error dark:text-error-dark",
-                    "twui-button-error-outlined",
-                );
-        } else if (variant == "ghost") {
-            if (color == "primary" || !color)
-                return twMerge(
-                    "bg-transparent dark:bg-transparent outline-none p-2",
-                    "text-primary-text dark:text-primary-dark-text hover:bg-transparent dark:hover:bg-transparent",
-                    "twui-button-primary-ghost",
-                );
-            if (color == "secondary")
-                return twMerge(
-                    "bg-transparent dark:bg-transparent outline-none p-2",
-                    "text-secondary hover:bg-transparent dark:hover:bg-transparent",
-                    "twui-button-secondary-ghost",
-                );
-            if (color == "text")
-                return twMerge(
-                    "bg-transparent dark:bg-transparent outline-none p-2 dark:text-foreground-dark",
-                    "text-foreground-light hover:bg-transparent dark:hover:bg-transparent",
-                    "twui-button-secondary-ghost",
-                );
-            if (color == "accent")
-                return twMerge(
-                    "bg-transparent dark:bg-transparent outline-none p-2",
-                    "text-accent hover:bg-transparent dark:hover:bg-transparent",
-                    "twui-button-accent-ghost",
-                );
-            if (color == "gray")
-                return twMerge(
-                    "bg-transparent dark:bg-transparent outline-none p-2 hover:bg-transparent dark:hover:bg-transparent",
-                    "text-slate-600 dark:text-white/70 hover:opacity-80",
-                    "twui-button-gray-ghost",
-                );
-            if (color == "error")
-                return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-red-600 dark:text-red-400",
-                    "twui-button-error-ghost",
-                );
-            if (color == "warning")
-                return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-yellow-600",
-                    "twui-button-warning-ghost",
-                );
-            if (color == "success")
-                return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-success",
-                    "twui-button-success-ghost",
-                );
-            if (color == "white")
-                return twMerge(
-                    "bg-transparent outline-none p-2",
-                    "text-white",
-                    "twui-button-white-ghost",
-                );
-        }
-
-        return "";
-    })();
+    const finalClassName = buttonClasses[variant || "normal"]?.[color || "primary"] ?? "";
 
     const buttonComponent = (
         <button
diff --git a/components/utils/fetch/fetchApi.ts b/components/utils/fetch/fetchApi.ts
index 2f3272e..4609b21 100644
--- a/components/utils/fetch/fetchApi.ts
+++ b/components/utils/fetch/fetchApi.ts
@@ -68,17 +68,17 @@ export default async function fetchApi<
                         method: options,
                         headers: finalHeaders,
                     } as RequestInit);
-                    data = fetchData.json();
+                    data = await fetchData.json();
                     break;
 
                 default:
                     fetchData = await fetch(finalURL);
-                    data = fetchData.json();
+                    data = await fetchData.json();
                     break;
             }
         } catch (error: any) {
             console.log("FetchAPI error #1:", error.message);
-            data = null;
+            data = { success: false, msg: error.message };
         }
     } else if (typeof options === "object") {
         try {
@@ -93,6 +93,7 @@ export default async function fetchApi<
                 options.headers = _.merge(options.headers, finalHeaders);
 
                 const finalOptions: any = { ...options };
+
                 fetchData = await fetch(finalURL, finalOptions);
             } else {
                 const finalOptions = {
@@ -103,10 +104,10 @@ export default async function fetchApi<
                 fetchData = await fetch(finalURL, finalOptions);
             }
 
-            data = fetchData.json();
+            data = await fetchData.json();
         } catch (error: any) {
             console.log("FetchAPI error #2:", error.message);
-            data = null;
+            data = { success: false, msg: error.message };
         }
     } else {
         try {
@@ -114,7 +115,7 @@ export default async function fetchApi<
             data = await fetchData.json();
         } catch (error: any) {
             console.log("FetchAPI error #3:", error.message);
-            data = null;
+            data = { success: false, msg: error.message };
         }
     }