Updates

components/layout/Stack.tsx

@@ -1,21 +1,37 @@
+import _ from "lodash";
 import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+type Props = DetailedHTMLProps<
+    HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+> & {
+    center?: boolean;
+    gap?: number | string;
+    componentRef?: React.RefObject<HTMLDivElement>;
+};
+
 /**
  * # Flexbox Column
  * @className twui-stack
  */
-export default function Stack({
-    ...props
-}: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+export default function Stack({ gap, componentRef, ...props }: Props) {
+    const finalProps = _.omit(props, "center");
     return (
         <div
-            {...props}
+            {...finalProps}
             className={twMerge(
-                "flex flex-col items-start",
+                "flex flex-col items-start gap-4",
+                props.center && "items-center",
+                gap
+                    ? typeof gap == "string"
+                        ? `gap-[${gap}]`
+                        : `gap-${gap}`
+                    : "",
                 "twui-stack",
                 props.className
             )}
+            ref={componentRef}
         >
             {props.children}
         </div>