From d9f36708eec0a0be6c08181a7b648189609dfeaf Mon Sep 17 00:00:00 2001
From: SIDANWhatever <wongkahinhinson@gmail.com>
Date: Wed, 14 Feb 2024 16:19:47 +0800
Subject: [PATCH] feat: adding flex box

---
 src/atoms/box.ts   | 39 +++++++++++++++++++++++++++++++++++++++
 src/atoms/index.ts |  2 ++
 2 files changed, 41 insertions(+)
 create mode 100644 src/atoms/box.ts

diff --git a/src/atoms/box.ts b/src/atoms/box.ts
new file mode 100644
index 0000000..c718a99
--- /dev/null
+++ b/src/atoms/box.ts
@@ -0,0 +1,39 @@
+export const Box = (styled: any) =>
+    styled('div', {
+        display: 'flex',
+        width: '100%',
+        wordWrap: 'break-word',
+        items: 'center',
+    });
+
+export const HBox = (styled: any) =>
+    styled(Box, {
+        variants: {
+            direction: {
+                rowReverse: {
+                    flexDirection: 'row-reverse',
+                },
+            },
+        },
+    });
+
+export const VBox = (styled: any) =>
+    styled(Box, {
+        flexDirection: 'column',
+        variants: {
+            direction: {
+                columnReverse: {
+                    flexDirection: 'column-reverse',
+                },
+            },
+        },
+    });
+
+export const FormBox = (styled: any) =>
+    styled('form', {
+        display: 'flex',
+        w: '100%',
+        wordWrap: 'break-word',
+        items: 'center',
+        flexDirection: 'column',
+    });
diff --git a/src/atoms/index.ts b/src/atoms/index.ts
index d1de9d2..c89dc7f 100644
--- a/src/atoms/index.ts
+++ b/src/atoms/index.ts
@@ -1,3 +1,4 @@
+import { Box } from './box';
 import { Button } from './button';
 import { Card } from './card';
 import { Input } from './input';
@@ -5,6 +6,7 @@ import { Overlay, OverlayInteract } from './overlay';
 import { Text } from './text';
 
 export const sidanAtoms = (styled: any) => ({
+    Box: Box(styled),
     Card: Card(styled),
     Button: Button(styled),
     Input: Input(styled),