feat(ui/react/components/layout): Box 컴포넌트 추가

packages/ui/react/src/components/layout/box.css.ts

@@ -0,0 +1,113 @@
+import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { dynamicStyles, dynamicVars, enumStyles } from '../../styles/utils';
+
+const { position, overflow, overflowX, overflowY, flexShrink, flexGrow } =
+  enumStyles;
+
+export const boxEnumVariants = recipe({
+  variants: {
+    position,
+    overflow,
+    overflowX,
+    overflowY,
+    flexShrink,
+    flexGrow,
+  },
+});
+
+export type BoxEnumVariants = Exclude<
+  RecipeVariants<typeof boxEnumVariants>,
+  undefined
+>;
+
+const {
+  paddingVar,
+  paddingBottomVar,
+  paddingLeftVar,
+  paddingRightVar,
+  paddingTopVar,
+  paddingXVar,
+  paddingYVar,
+  widthVar,
+  minWidthVar,
+  maxWidthVar,
+  heightVar,
+  minHeightVar,
+  maxHeightVar,
+  insetVar,
+  topVar,
+  bottomVar,
+  leftVar,
+  rightVar,
+  flexBasisVar,
+} = dynamicVars;
+
+export const boxDynamicVariantVars = {
+  paddingVar,
+  paddingBottomVar,
+  paddingLeftVar,
+  paddingRightVar,
+  paddingTopVar,
+  paddingXVar,
+  paddingYVar,
+  widthVar,
+  minWidthVar,
+  maxWidthVar,
+  heightVar,
+  minHeightVar,
+  maxHeightVar,
+  insetVar,
+  topVar,
+  bottomVar,
+  leftVar,
+  rightVar,
+  flexBasisVar,
+};
+
+export const {
+  padding,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingX,
+  paddingY,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  inset,
+  top,
+  bottom,
+  left,
+  right,
+  flexBasis,
+} = dynamicStyles;
+
+export const boxDynamicVariants = {
+  padding,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  paddingX,
+  paddingY,
+  width,
+  minWidth,
+  maxWidth,
+  height,
+  minHeight,
+  maxHeight,
+  inset,
+  top,
+  bottom,
+  left,
+  right,
+  flexBasis,
+};
+
+export type BoxDynamicVariants = Partial<
+  Record<keyof typeof boxDynamicVariants, number | string>
+>;

packages/ui/react/src/components/layout/box.tsx

@@ -0,0 +1,55 @@
+import { type HTMLFavolinkProps, Slot, forwardRef } from '@favolink-ui/system';
+import { cx } from '@favolink-ui/utils';
+import * as styles from './box.css';
+import { extractDynamicProps } from '../../styles';
+
+type BoxDivProps = HTMLFavolinkProps<'div'> & { as?: 'div' };
+
+type BoxSpanProps = HTMLFavolinkProps<'span'> & { as: 'span' };
+
+export type BoxProps = styles.BoxDynamicVariants &
+  styles.BoxEnumVariants &
+  (BoxDivProps | BoxSpanProps);
+
+export const Box = forwardRef<BoxProps, 'div'>(
+  function Box(props, forwardedRef) {
+    const {
+      as: Tag = 'div',
+      asChild,
+      children,
+      className,
+      position,
+      overflow,
+      overflowX,
+      overflowY,
+      flexShrink,
+      flexGrow,
+      ...restProps
+    } = extractDynamicProps(
+      props,
+      styles.boxDynamicVariantVars,
+      styles.boxDynamicVariants,
+    );
+
+    return (
+      <Slot
+        {...restProps}
+        ref={forwardedRef}
+        className={cx(
+          'favolink-box',
+          styles.boxEnumVariants({
+            position,
+            overflow,
+            overflowX,
+            overflowY,
+            flexShrink,
+            flexGrow,
+          }),
+          className,
+        )}
+      >
+        {asChild ? children : <Tag>{children}</Tag>}
+      </Slot>
+    );
+  },
+);

packages/ui/react/src/components/layout/index.ts

@@ -4,4 +4,5 @@ export {
   type CSSPropertyValue,
 } from './create-css-property-style-variants';
 
+export { Box, type BoxProps } from './box';
 export { Flex, type FlexProps } from './flex';