fix: Box

daangn · Jan 19, 2025 · da39b9d · da39b9d
1 parent ca7aea9
commit da39b9d
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -48,6 +48,63 @@ function handleRadius(radius: string | undefined) {
   return vars.$radius[radius] ?? undefined;
 }
 
+function handleDisplay(
+  display: "block" | "flex" | "inlineFlex" | "inline" | "inlineBlock" | "none" | undefined,
+) {
+  if (!display) {
+    return undefined;
+  }
+
+  return {
+    block: "block",
+    flex: "flex",
+    inlineFlex: "inline-flex",
+    inline: "inline",
+    inlineBlock: "inline-block",
+    none: "none",
+  }[display];
+}
+
+function handleFlexDirection(flexDirection: string | undefined) {
+  if (!flexDirection) {
+    return undefined;
+  }
+
+  return {
+    row: "row",
+    column: "column",
+    rowReverse: "row-reverse",
+    columnReverse: "column-reverse",
+  }[flexDirection];
+}
+
+function handleJustifyContent(justifyContent: string | undefined) {
+  if (!justifyContent) {
+    return undefined;
+  }
+
+  return {
+    flexStart: "flex-start",
+    flexEnd: "flex-end",
+    center: "center",
+    spaceBetween: "space-between",
+    spaceAround: "space-around",
+  }[justifyContent];
+}
+
+function handleAlignItems(alignItems: string | undefined) {
+  if (!alignItems) {
+    return undefined;
+  }
+
+  return {
+    flexStart: "flex-start",
+    flexEnd: "flex-end",
+    center: "center",
+    stretch: "stretch",
+  }[alignItems];
+}
+
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
   as?: React.ElementType;
 
@@ -224,18 +281,18 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
           "--seed-box-padding-bottom": handleDimension(paddingBottom),
           "--seed-box-padding-left": handleDimension(paddingLeft),
           "--seed-box-gap": handleDimension(gap),
-          "--seed-box-display": display,
+          "--seed-box-display": handleDisplay(display),
           "--seed-box-position": position,
           "--seed-box-overflow-x": overflowX,
           "--seed-box-overflow-y": overflowY,
           "--seed-box-flex-grow": flexGrow,
           "--seed-box-flex-shrink": flexShrink,
-          "--seed-box-flex-direction": flexDirection,
+          "--seed-box-flex-direction": handleFlexDirection(flexDirection),
           "--seed-box-flex-wrap": flexWrap,
-          "--seed-box-justify-content": justifyContent,
-          "--seed-box-align-items": alignItems,
-          "--seed-box-align-content": alignContent,
-          "--seed-box-align-self": alignSelf,
+          "--seed-box-justify-content": handleJustifyContent(justifyContent),
+          "--seed-box-align-items": handleAlignItems(alignItems),
+          "--seed-box-align-content": handleAlignItems(alignContent),
+          "--seed-box-align-self": handleAlignItems(alignSelf),
           ...style,
         } as React.CSSProperties
       }

diff --git a/packages/stylesheet/base.css b/packages/stylesheet/base.css
@@ -83,12 +83,14 @@
   --seed-box-justify-content: initial;
   --seed-box-align-items: stretch;
   --seed-box-align-content: stretch;
+  --seed-box-align-self: auto;
   --seed-box-gap: initial;
   flex-direction: var(--seed-box-flex-direction);
   flex-wrap: var(--seed-box-flex-wrap);
   justify-content: var(--seed-box-justify-content);
   align-items: var(--seed-box-align-items);
   align-content: var(--seed-box-align-content);
+  align-self: var(--seed-box-align-self);
   gap: var(--seed-box-gap);
 }