Updates

components/lib/layout/Button.tsx

@@ -179,7 +179,7 @@ export default function Button({
             <div
                 {...buttonContentProps}
                 className={twMerge(
-                    "flex flex-row items-center gap-2",
+                    "flex flex-row items-center gap-2 whitespace-nowrap",
                     loading ? "opacity-0" : "",
                     "twui-button-content-wrapper",
                     buttonContentProps?.className
@@ -190,7 +190,22 @@ export default function Button({
                 {afterIcon && afterIcon}
             </div>
 
-            {loading && <Loading className="absolute" />}
+            {loading && (
+                <Loading
+                    className="absolute"
+                    size={(() => {
+                        switch (size) {
+                            case "small":
+                                return "small";
+                            case "smaller":
+                                return "smaller";
+
+                            default:
+                                return "normal";
+                        }
+                    })()}
+                />
+            )}
         </button>
     );
 

components/lib/layout/HR.tsx

@@ -12,7 +12,7 @@ export default function HR({
         <hr
             {...props}
             className={twMerge(
-                "border-slate-200 dark:border-white/20 w-full my-4",
+                "border-slate-200 dark:border-white/10 w-full my-4",
                 "twui-hr",
                 props.className
             )}

components/lib/layout/Img.tsx

@@ -0,0 +1,82 @@
+import _ from "lodash";
+import React, { DetailedHTMLProps, ImgHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+export type TWUIImageProps = DetailedHTMLProps<
+    ImgHTMLAttributes<HTMLImageElement>,
+    HTMLImageElement
+> & {
+    size?: number;
+    circle?: boolean;
+    bgImg?: boolean;
+    backgroundImage?: boolean;
+    fallbackImageSrc?: string;
+    srcLight?: string;
+    srcDark?: string;
+};
+
+/**
+ * # Image Component
+ * @className twui-img
+ */
+export default function Img({ ...props }: TWUIImageProps) {
+    const width = props.size || props.width;
+    const height = props.size || props.height;
+    const sizeRatio = width && height ? Number(width) / Number(height) : 1;
+
+    const finalProps = _.omit(props, [
+        "size",
+        "circle",
+        "bgImg",
+        "backgroundImage",
+        "fallbackImageSrc",
+        "srcLight",
+        "srcDark",
+    ]);
+
+    const interpolatedProps: typeof props = {
+        ...finalProps,
+        width: width,
+        height: height,
+        className: twMerge(
+            "object-cover",
+            props.circle && "rounded-full",
+            props.bgImg || props.backgroundImage
+                ? "absolute top-0 left-0 w-full h-full object-cover z-0"
+                : "",
+            "twui-img",
+            props.className
+        ),
+        onError: (e) => {
+            if (props.fallbackImageSrc) {
+                e.currentTarget.src = props.fallbackImageSrc;
+            }
+            props.onError?.(e);
+        },
+    };
+
+    if (props.srcDark && props.srcLight) {
+        return (
+            <React.Fragment>
+                <img
+                    {...interpolatedProps}
+                    className={twMerge(
+                        "hidden dark:block",
+                        interpolatedProps.className
+                    )}
+                    src={props.srcDark}
+                />
+                <img
+                    {...interpolatedProps}
+                    className={twMerge(
+                        "block dark:hidden",
+                        interpolatedProps.className
+                    )}
+                    src={props.srcLight}
+                />
+            </React.Fragment>
+        );
+    }
+
+    return <img {...interpolatedProps} />;
+}

components/lib/layout/LoadingRectangleBlock.tsx

@@ -18,6 +18,7 @@ export default function LoadingRectangleBlock({
             {...props}
             className={twMerge(
                 "flex items-center w-full h-10 animate-pulse bg-slate-200 rounded",
+                "dark:bg-slate-800",
                 "twui-loading-rectangle-block",
                 props.className
             )}

components/lib/layout/Stack.tsx

@@ -1,3 +1,4 @@
+import _ from "lodash";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -7,12 +8,16 @@ import { twMerge } from "tailwind-merge";
  */
 export default function Stack({
     ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+    center?: boolean;
+}) {
+    const finalProps = _.omit(props, "center");
     return (
         <div
-            {...props}
+            {...finalProps}
             className={twMerge(
                 "flex flex-col items-start gap-4",
+                props.center && "items-center",
                 "twui-stack",
                 props.className
             )}