From f73b56cdc43f8b40a57e239b1630de612ce31a68 Mon Sep 17 00:00:00 2001
From: Benjamin Toby <benoti.san@gmail.com>
Date: Thu, 17 Oct 2024 09:06:54 +0100
Subject: [PATCH] Updates

---
 components/elements/ColorSchemeSelector.tsx |  14 ++-
 components/elements/Loading.tsx             |  50 +++++++++
 components/elements/Toggle.tsx              |  15 ++-
 components/form/Form.tsx                    |  10 +-
 components/form/Input.tsx                   |  11 +-
 components/form/Textarea.tsx                |  24 +++++
 components/layout/Button.tsx                | 111 ++++++++++++++++++--
 components/layout/Container.tsx             |   3 +-
 components/layout/Divider.tsx               |  27 +++++
 components/layout/Footer.tsx                |   8 +-
 components/layout/H1.tsx                    |   9 +-
 components/layout/H2.tsx                    |   9 +-
 components/layout/H3.tsx                    |   9 +-
 components/layout/H4.tsx                    |   9 +-
 components/layout/H5.tsx                    |   9 +-
 components/layout/HR.tsx                    |   7 +-
 components/layout/Header.tsx                |   4 +-
 components/layout/Link.tsx                  |   8 ++
 components/layout/List.tsx                  |  54 ++++++++++
 components/layout/Main.tsx                  |   7 +-
 components/layout/P.tsx                     |  14 ++-
 components/layout/Row.tsx                   |   7 +-
 components/layout/Section.tsx               |   5 +
 components/layout/Span.tsx                  |   9 +-
 components/layout/Stack.tsx                 |  10 +-
 25 files changed, 408 insertions(+), 35 deletions(-)
 create mode 100644 components/elements/Loading.tsx
 create mode 100644 components/form/Textarea.tsx
 create mode 100644 components/layout/Divider.tsx
 create mode 100644 components/layout/List.tsx

diff --git a/components/elements/ColorSchemeSelector.tsx b/components/elements/ColorSchemeSelector.tsx
index 61ea54c..8663151 100644
--- a/components/elements/ColorSchemeSelector.tsx
+++ b/components/elements/ColorSchemeSelector.tsx
@@ -1,4 +1,4 @@
-import { DetailedHTMLProps, HTMLAttributes } from "react";
+import React, { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle";
 
@@ -8,12 +8,22 @@ export default function ColorSchemeSelector({
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     toggleProps?: TWUI_TOGGLE_PROPS;
 }) {
+    const [active, setActive] = React.useState(false);
+
+    React.useEffect(() => {
+        if (active) {
+            document.documentElement.className = "dark";
+        } else {
+            document.documentElement.className = "";
+        }
+    }, [active]);
+
     return (
         <div
             {...props}
             className={twMerge("flex flex-row items-center", props.className)}
         >
-            <Toggle {...toggleProps} />
+            <Toggle active={active} setActive={setActive} {...toggleProps} />
         </div>
     );
 }
diff --git a/components/elements/Loading.tsx b/components/elements/Loading.tsx
new file mode 100644
index 0000000..2d2d75d
--- /dev/null
+++ b/components/elements/Loading.tsx
@@ -0,0 +1,50 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    size?: "small" | "normal" | "medium" | "large";
+};
+
+export default function Loading({ size, ...props }: Props) {
+    const sizeClassName = (() => {
+        switch (size) {
+            case "small":
+                return "w-2 h-2";
+            case "normal":
+                return "w-4 h-4";
+            case "normal":
+                return "w-6 h-6";
+            case "large":
+                return "w-8 h-8";
+
+            default:
+                return "w-4 h-4";
+        }
+    })();
+    return (
+        <div role="status" {...props}>
+            <svg
+                aria-hidden="true"
+                className={twMerge(
+                    "text-gray-200 animate-spin dark:text-gray-600 fill-blue-600",
+                    sizeClassName
+                )}
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                />
+            </svg>
+        </div>
+    );
+}
diff --git a/components/elements/Toggle.tsx b/components/elements/Toggle.tsx
index 76f993a..ad276c4 100644
--- a/components/elements/Toggle.tsx
+++ b/components/elements/Toggle.tsx
@@ -6,6 +6,7 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
     HTMLDivElement
 > & {
     active?: boolean;
+    setActive?: React.Dispatch<React.SetStateAction<boolean>>;
     circleProps?: DetailedHTMLProps<
         HTMLAttributes<HTMLDivElement>,
         HTMLDivElement
@@ -20,24 +21,28 @@ export type TWUI_TOGGLE_PROPS = DetailedHTMLProps<
 export default function Toggle({
     circleProps,
     active,
+    setActive,
     ...props
 }: TWUI_TOGGLE_PROPS) {
     return (
         <div
             {...props}
             className={twMerge(
-                "flex flex-row items-center w-full max-w-[200px]",
-                "border border-slate-300 border-solid rounded-full",
-                active ? "" : "",
+                "flex flex-row items-center w-[40px] p-[3px] transition-all",
+                "border border-slate-300 dark:border-white/30 border-solid rounded-full",
+                active ? "justify-end" : "justify-start",
                 "twui-toggle-wrapper",
                 props.className
             )}
+            onClick={() => setActive?.(!active)}
         >
             <div
                 {...circleProps}
                 className={twMerge(
-                    "w-20 h-20 rounded-full",
-                    active ? "" : "",
+                    "w-3.5 h-3.5 rounded-full ",
+                    active
+                        ? "bg-blue-600 dark:bg-blue-500"
+                        : "bg-slate-300 dark:bg-white/40",
                     "twui-toggle-circle",
                     circleProps?.className
                 )}
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index 489c14b..b0d92eb 100644
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, FormHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Form Element
+ * @className twui-form
+ */
 export default function Form({
     ...props
 }: DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) {
@@ -8,10 +12,12 @@ export default function Form({
         <form
             {...props}
             className={twMerge(
-                "flex flex-col items-start gap-4 w-full",
+                "flex flex-col items-stretch gap-2 w-full bg-transparent",
                 "twui-form",
                 props.className
             )}
-        ></form>
+        >
+            {props.children}
+        </form>
     );
 }
diff --git a/components/form/Input.tsx b/components/form/Input.tsx
index 516f99c..66a915c 100644
--- a/components/form/Input.tsx
+++ b/components/form/Input.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Input Element
+ * @className twui-input
+ */
 export default function Input({
     ...props
 }: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
@@ -8,7 +12,12 @@ export default function Input({
         <input
             {...props}
             className={twMerge(
-                "w-full px-4 py-2 border border-slate-300 rounded",
+                "w-full px-4 py-2 border rounded-md",
+                "border-slate-300 dark:border-white/20",
+                "focus:border-slate-700 dark:focus:border-white/50",
+                "outline-slate-300 dark:outline-white/20",
+                "focus:outline-slate-700 dark:focus:outline-white/50",
+                "bg-white dark:bg-black",
                 "twui-input",
                 props.className
             )}
diff --git a/components/form/Textarea.tsx b/components/form/Textarea.tsx
new file mode 100644
index 0000000..2c95769
--- /dev/null
+++ b/components/form/Textarea.tsx
@@ -0,0 +1,24 @@
+import { DetailedHTMLProps, TextareaHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Textarea Component
+ * @className twui-textarea
+ */
+export default function Textarea({
+    ...props
+}: DetailedHTMLProps<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+>) {
+    return (
+        <textarea
+            {...props}
+            className={twMerge(
+                "w-full px-4 py-2 border border-slate-300 rounded",
+                "twui-textarea",
+                props.className
+            )}
+        />
+    );
+}
diff --git a/components/layout/Button.tsx b/components/layout/Button.tsx
index 23465ae..946b2f4 100644
--- a/components/layout/Button.tsx
+++ b/components/layout/Button.tsx
@@ -3,25 +3,44 @@ import {
     ButtonHTMLAttributes,
     DetailedHTMLProps,
     HTMLAttributeAnchorTarget,
-    HTMLAttributes,
 } from "react";
-import { ClassNameValue, twMerge } from "tailwind-merge";
+import { twMerge } from "tailwind-merge";
+import Loading from "../elements/Loading";
 
+/**
+ * # Buttons
+ * @className twui-button-general
+ * @className twui-button-content-wrapper
+ * @className twui-button-primary
+ * @className twui-button-primary-outlined
+ * @className twui-button-primary-ghost
+ * @className twui-button-secondary
+ * @className twui-button-secondary-outlined
+ * @className twui-button-secondary-ghost
+ * @className twui-button-accent
+ * @className twui-button-accent-outlined
+ * @className twui-button-accent-ghost
+ * @className twui-button-gray
+ * @className twui-button-gray-outlined
+ * @className twui-button-gray-ghost
+ */
 export default function Button({
     href,
     target,
     variant,
     color,
     linkProps,
+    loading,
     ...props
 }: DetailedHTMLProps<
     ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
 > & {
     variant?: "normal" | "ghost" | "outlined";
-    color?: "primary" | "secondary" | "accent";
+    color?: "primary" | "secondary" | "accent" | "gray";
     href?: string;
     target?: HTMLAttributeAnchorTarget;
+    loading?: boolean;
     linkProps?: DetailedHTMLProps<
         AnchorHTMLAttributes<HTMLAnchorElement>,
         HTMLAnchorElement
@@ -29,14 +48,76 @@ export default function Button({
 }) {
     const finalClassName: string = (() => {
         if (variant == "normal" || !variant) {
-            if (color == "primary" || !color) return "bg-blue-500 text-white";
+            if (color == "primary" || !color)
+                return twMerge(
+                    "bg-blue-500 hover:bg-blue-600 text-white",
+                    "twui-button-primary"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-emerald-500 hover:bg-emerald-600 text-white",
+                    "twui-button-secondary"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-violet-500 hover:bg-violet-600 text-white",
+                    "twui-button-accent"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-slate-300 hover:bg-slate-200 text-slate-800",
+                    "twui-button-gray"
+                );
         } else if (variant == "outlined") {
             if (color == "primary" || !color)
-                return (
-                    "bg-transparent outline outline-1 outline-blue-500" +
-                    " text-blue-500"
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-blue-500",
+                    "text-blue-500",
+                    "twui-button-primary-outlined"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-emerald-500",
+                    "text-emerald-500",
+                    "twui-button-secondary-outlined"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-violet-500",
+                    "text-violet-500",
+                    "twui-button-accent-outlined"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-transparent outline outline-1 outline-slate-300",
+                    "text-slate-600",
+                    "twui-button-gray-outlined"
                 );
         } else if (variant == "ghost") {
+            if (color == "primary" || !color)
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-blue-500",
+                    "twui-button-primary-ghost"
+                );
+            if (color == "secondary")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-emerald-500",
+                    "twui-button-secondary-ghost"
+                );
+            if (color == "accent")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-violet-500",
+                    "twui-button-accent-ghost"
+                );
+            if (color == "gray")
+                return twMerge(
+                    "bg-transparent outline-none p-2",
+                    "text-slate-600",
+                    "twui-button-gray-ghost"
+                );
         }
 
         return "";
@@ -47,11 +128,23 @@ export default function Button({
             {...props}
             className={twMerge(
                 "bg-blue-600 text-white text-base font-medium px-4 py-2 rounded",
+                "flex items-center justify-center relative transition-all",
+                "twui-button-general",
                 finalClassName,
-                props.className
+                props.className,
+                loading ? "pointer-events-none opacity-80" : "l"
             )}
         >
-            {props.children}
+            <div
+                className={twMerge(
+                    "flex items-center gap-2",
+                    loading ? "opacity-0" : "",
+                    "twui-button-content-wrapper"
+                )}
+            >
+                {props.children}
+            </div>
+            {loading && <Loading className="absolute" />}
         </button>
     );
 
diff --git a/components/layout/Container.tsx b/components/layout/Container.tsx
index 98fb94b..24326bf 100644
--- a/components/layout/Container.tsx
+++ b/components/layout/Container.tsx
@@ -12,7 +12,8 @@ export default function Container({
         <div
             {...props}
             className={twMerge(
-                "flex flex-row items-center w-full max-w-[1200px]",
+                "flex items-center w-full max-w-[1200px] gap-4 justify-between",
+                "flex-wrap flex-col xl:flex-row",
                 "twui-container",
                 props.className
             )}
diff --git a/components/layout/Divider.tsx b/components/layout/Divider.tsx
new file mode 100644
index 0000000..a71c87d
--- /dev/null
+++ b/components/layout/Divider.tsx
@@ -0,0 +1,27 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Vertical and Horizontal Divider
+ * @className twui-divider
+ */
+export default function Divider({
+    vertical,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    vertical?: boolean;
+}) {
+    return (
+        <div
+            {...props}
+            className={twMerge(
+                "border-slate-200 dark:border-white/10",
+                vertical
+                    ? "border-0 border-l h-full min-h-5"
+                    : "border-0 border-t w-full",
+                "twui-divider",
+                props.className
+            )}
+        />
+    );
+}
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
index 9ded3db..9bb2573 100644
--- a/components/layout/Footer.tsx
+++ b/components/layout/Footer.tsx
@@ -1,11 +1,15 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # General Footer
+ * @className twui-footer
+ */
 export default function Footer({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
     return (
-        <header
+        <footer
             {...props}
             className={twMerge(
                 "flex flex-col items-center justify-center",
@@ -16,6 +20,6 @@ export default function Footer({
             )}
         >
             {props.children}
-        </header>
+        </footer>
     );
 }
diff --git a/components/layout/H1.tsx b/components/layout/H1.tsx
index 76a01bd..83d6069 100644
--- a/components/layout/H1.tsx
+++ b/components/layout/H1.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # H1 Headers
+ * @className twui-h1
+ */
 export default function H1({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <h1 {...props} className={twMerge("text-5xl mb-4", props.className)}>
+        <h1
+            {...props}
+            className={twMerge("text-5xl mb-4", "twui-h1", props.className)}
+        >
             {props.children}
         </h1>
     );
diff --git a/components/layout/H2.tsx b/components/layout/H2.tsx
index 26d2414..3ab1537 100644
--- a/components/layout/H2.tsx
+++ b/components/layout/H2.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # H2 Headers
+ * @className twui-h2
+ */
 export default function H2({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <h2 {...props} className={twMerge("text-3xl mb-4", props.className)}>
+        <h2
+            {...props}
+            className={twMerge("text-3xl mb-4", "twui-h2", props.className)}
+        >
             {props.children}
         </h2>
     );
diff --git a/components/layout/H3.tsx b/components/layout/H3.tsx
index ab778e7..5c2e7df 100644
--- a/components/layout/H3.tsx
+++ b/components/layout/H3.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # H3 Headers
+ * @className twui-h3
+ */
 export default function H3({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <h3 {...props} className={twMerge("text-xl mb-4", props.className)}>
+        <h3
+            {...props}
+            className={twMerge("text-xl mb-4", "twui-h3", props.className)}
+        >
             {props.children}
         </h3>
     );
diff --git a/components/layout/H4.tsx b/components/layout/H4.tsx
index 4783c7c..0bae843 100644
--- a/components/layout/H4.tsx
+++ b/components/layout/H4.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # H4 Headers
+ * @className twui-h4
+ */
 export default function H4({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <h4 {...props} className={twMerge("text-base mb-4", props.className)}>
+        <h4
+            {...props}
+            className={twMerge("text-base mb-4", "twui-h4", props.className)}
+        >
             {props.children}
         </h4>
     );
diff --git a/components/layout/H5.tsx b/components/layout/H5.tsx
index 3d6db10..3a1d4b9 100644
--- a/components/layout/H5.tsx
+++ b/components/layout/H5.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # H5 Headers
+ * @className twui-h5
+ */
 export default function H5({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <h5 {...props} className={twMerge("text-sm mb-4", props.className)}>
+        <h5
+            {...props}
+            className={twMerge("text-sm mb-4", "twui-h5", props.className)}
+        >
             {props.children}
         </h5>
     );
diff --git a/components/layout/HR.tsx b/components/layout/HR.tsx
index 47c59fb..57a5cbf 100644
--- a/components/layout/HR.tsx
+++ b/components/layout/HR.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Horizonta Rule (hr)
+ * @className twui-hr
+ */
 export default function HR({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>) {
@@ -8,7 +12,8 @@ export default function HR({
         <hr
             {...props}
             className={twMerge(
-                "bg-slate-400 w-full dark:bg-white/20 my-4",
+                "border-slate-200 dark:border-white/20 w-full my-4",
+                "twui-hr",
                 props.className
             )}
         />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index a3bf9d0..55abd6d 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -13,8 +13,8 @@ export default function Header({
             {...props}
             className={twMerge(
                 "flex flex-col items-center justify-center",
-                "px-4 sm:px-10 py-2",
-                "border-0 border-b border-slate-200 border-solid",
+                "px-4 sm:px-10 py-3 flex-wrap",
+                "border-0 border-b border-slate-200 dark:border-white/10 border-solid",
                 "twui-header",
                 props.className
             )}
diff --git a/components/layout/Link.tsx b/components/layout/Link.tsx
index c99a35b..5314893 100644
--- a/components/layout/Link.tsx
+++ b/components/layout/Link.tsx
@@ -1,6 +1,10 @@
 import { AnchorHTMLAttributes, DetailedHTMLProps } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # General Anchor Elements
+ * @className twui-a | twui-anchor
+ */
 export default function Link({
     ...props
 }: DetailedHTMLProps<
@@ -12,6 +16,10 @@ export default function Link({
             {...props}
             className={twMerge(
                 "text-base text-link-500 no-underline hover:text-link-500/50",
+                "text-blue-600 dark:text-blue-400",
+                "border-0 border-b border-blue-300 border-solid leading-4",
+                "twui-anchor",
+                "twui-a",
                 props.className
             )}
         >
diff --git a/components/layout/List.tsx b/components/layout/List.tsx
new file mode 100644
index 0000000..eb52238
--- /dev/null
+++ b/components/layout/List.tsx
@@ -0,0 +1,54 @@
+import {
+    AnchorHTMLAttributes,
+    DetailedHTMLProps,
+    HTMLAttributes,
+    OlHTMLAttributes,
+} from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Ordered and unorder Lists
+ * @className twui-ol
+ * @className twui-ul
+ */
+export default function List({
+    ordered,
+    items,
+    ...props
+}: DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement> &
+    DetailedHTMLProps<OlHTMLAttributes<HTMLOListElement>, HTMLOListElement> & {
+        items: {
+            content: React.ReactNode | string;
+        }[];
+        ordered?: boolean;
+    }) {
+    const listContent = (
+        <>
+            {items.map((item, index) => (
+                <li key={index}>{item.content}</li>
+            ))}
+        </>
+    );
+
+    const className = "flex flex-col items-start gap-4";
+
+    if (ordered) {
+        return (
+            <ol
+                {...props}
+                className={twMerge(className, "twui-ol", props.className)}
+            >
+                {listContent}
+            </ol>
+        );
+    }
+
+    return (
+        <ul
+            {...props}
+            className={twMerge(className, "twui-ul", props.className)}
+        >
+            {listContent}
+        </ul>
+    );
+}
diff --git a/components/layout/Main.tsx b/components/layout/Main.tsx
index 7495c30..c9c7d15 100644
--- a/components/layout/Main.tsx
+++ b/components/layout/Main.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Main Wrapper
+ * @className twui-h1
+ */
 export default function Main({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
@@ -8,7 +12,8 @@ export default function Main({
         <main
             {...props}
             className={twMerge(
-                "flex flex-col items-start w-full",
+                "flex flex-col items-center w-full",
+                "twui-main",
                 props.className
             )}
         >
diff --git a/components/layout/P.tsx b/components/layout/P.tsx
index 6fefdc9..2a32095 100644
--- a/components/layout/P.tsx
+++ b/components/layout/P.tsx
@@ -1,11 +1,23 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Paragraph Tag
+ * @className twui-p | twui-paragraph
+ */
 export default function P({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <p {...props} className={twMerge("text-base py-4", props.className)}>
+        <p
+            {...props}
+            className={twMerge(
+                "text-base py-4",
+                "twui-p",
+                "twui-paragraph",
+                props.className
+            )}
+        >
             {props.children}
         </p>
     );
diff --git a/components/layout/Row.tsx b/components/layout/Row.tsx
index 88951ba..2512779 100644
--- a/components/layout/Row.tsx
+++ b/components/layout/Row.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Flexbox Row
+ * @className twui-row
+ */
 export default function Row({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
@@ -8,7 +12,8 @@ export default function Row({
         <div
             {...props}
             className={twMerge(
-                "flex flex-row items-center gap-2",
+                "flex flex-row items-center gap-2 flex-wrap",
+                "twui-row",
                 props.className
             )}
         >
diff --git a/components/layout/Section.tsx b/components/layout/Section.tsx
index 6259c56..fb2e387 100644
--- a/components/layout/Section.tsx
+++ b/components/layout/Section.tsx
@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # General Section
+ * @className twui-section
+ */
 export default function Section({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>) {
@@ -10,6 +14,7 @@ export default function Section({
             className={twMerge(
                 "flex flex-col items-center w-full",
                 "px-4 sm:px-10 py-10",
+                "twui-section",
                 props.className
             )}
         >
diff --git a/components/layout/Span.tsx b/components/layout/Span.tsx
index ae715e8..46f79ff 100644
--- a/components/layout/Span.tsx
+++ b/components/layout/Span.tsx
@@ -1,11 +1,18 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Span element
+ * @className twui-span
+ */
 export default function Span({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>) {
     return (
-        <span {...props} className={twMerge("text-base", props.className)}>
+        <span
+            {...props}
+            className={twMerge("text-base", "twui-span", props.className)}
+        >
             {props.children}
         </span>
     );
diff --git a/components/layout/Stack.tsx b/components/layout/Stack.tsx
index 44832c9..0882a00 100644
--- a/components/layout/Stack.tsx
+++ b/components/layout/Stack.tsx
@@ -1,13 +1,21 @@
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Flexbox Column
+ * @className twui-stack
+ */
 export default function Stack({
     ...props
 }: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
     return (
         <div
             {...props}
-            className={twMerge("flex flex-col items-start", props.className)}
+            className={twMerge(
+                "flex flex-col items-start",
+                "twui-stack",
+                props.className
+            )}
         >
             {props.children}
         </div>