chore(@kadena/react-ui): Add more style props to Box component

.changeset/beige-goats-obey.md

@@ -0,0 +1,2 @@
+---
+---

packages/libs/react-ui/src/components/Layout/Box/Box.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<IBoxProps> = {
       description: {
         component:
           'Box is the most basic building block of application layout.\n' +
-          '\nThis component allows for passing the <i>display</i>, <i>margin</i> and <i>padding</i> properties.',
+          '\nThis component accepts an `as` prop which allows the user to pass what html element the `Box` will render as well as many style attributes that are mapped to css utility classes.',
       },
     },
   },

packages/libs/react-ui/src/components/Layout/Box/Box.tsx

@@ -9,8 +9,23 @@ export interface IBoxProps
   extends Partial<
     Pick<
       Sprinkles,
+      | 'alignItems'
+      | 'backgroundColor'
+      | 'borderColor'
+      | 'borderRadius'
+      | 'borderStyle'
+      | 'borderWidth'
+      | 'bottom'
+      | 'cursor'
       | 'display'
+      | 'flexDirection'
+      | 'flexGrow'
+      | 'flexShrink'
+      | 'flexWrap'
       | 'height'
+      | 'inset'
+      | 'justifyContent'
+      | 'left'
       | 'margin'
       | 'marginBottom'
       | 'marginLeft'
@@ -22,6 +37,7 @@ export interface IBoxProps
       | 'maxWidth'
       | 'minHeight'
       | 'minWidth'
+      | 'opacity'
       | 'overflow'
       | 'padding'
       | 'paddingBottom'
@@ -30,7 +46,12 @@ export interface IBoxProps
       | 'paddingTop'
       | 'paddingX'
       | 'paddingY'
+      | 'position'
+      | 'right'
+      | 'textAlign'
+      | 'top'
       | 'width'
+      | 'zIndex'
     >
   > {
   className?: string;
@@ -42,8 +63,23 @@ export const Box = ({
   as = 'div',
   children,
   className,
+  alignItems,
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  borderStyle,
+  borderWidth,
+  bottom,
+  cursor,
   display = 'block',
+  flexDirection,
+  flexGrow,
+  flexShrink,
+  flexWrap,
   height,
+  inset,
+  justifyContent,
+  left,
   margin,
   marginBottom,
   marginLeft,
@@ -55,6 +91,7 @@ export const Box = ({
   maxWidth,
   minHeight,
   minWidth,
+  opacity,
   overflow,
   padding,
   paddingBottom,
@@ -63,15 +100,35 @@ export const Box = ({
   paddingTop,
   paddingX,
   paddingY,
+  position,
+  right,
+  textAlign,
+  top,
   width,
+  zIndex,
 }: IBoxProps): React.ReactElement => {
   return createElement(
     as,
     {
       className: classnames(
         sprinkles({
+          alignItems,
+          backgroundColor,
+          borderColor,
+          borderRadius,
+          borderStyle,
+          borderWidth,
+          bottom,
+          cursor,
           display,
+          flexDirection,
+          flexGrow,
+          flexShrink,
+          flexWrap,
           height,
+          inset,
+          justifyContent,
+          left,
           margin,
           marginBottom,
           marginLeft,
@@ -83,6 +140,7 @@ export const Box = ({
           maxWidth,
           minHeight,
           minWidth,
+          opacity,
           overflow,
           padding,
           paddingBottom,
@@ -91,7 +149,12 @@ export const Box = ({
           paddingTop,
           paddingX,
           paddingY,
+          position,
+          right,
+          textAlign,
+          top,
           width,
+          zIndex,
         }),
         className,
       ),

packages/libs/react-ui/src/styles/sprinkles.css.ts

@@ -5,27 +5,29 @@ import { darkThemeClass, vars } from './vars.css';
 
 const systemProperties = defineProperties({
   properties: {
-    fontFamily: vars.fonts,
-    lineHeight: vars.lineHeights,
+    border: ['none'],
     borderRadius: vars.radii,
-    borderWidth: vars.borderWidths,
     borderStyle: ['solid', 'none'],
+    borderWidth: vars.borderWidths,
+    bottom: vars.sizes,
     cursor: ['pointer', 'not-allowed'],
+    flex: [1],
+    flexGrow: [0, 1],
+    flexShrink: [0],
     flexWrap: ['wrap', 'nowrap'],
-    top: vars.sizes,
-    bottom: vars.sizes,
+    fontFamily: vars.fonts,
+    inset: [0],
     left: vars.sizes,
-    right: vars.sizes,
-    flexShrink: [0],
-    flexGrow: [0, 1],
-    zIndex: [-1, 0, 1],
-    border: ['none'],
+    lineHeight: vars.lineHeights,
+    listStyleType: ['none'],
+    objectFit: ['cover', 'contain'],
     outline: ['none'],
-    textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'],
+    right: vars.sizes,
     textDecoration: ['underline', 'none'],
+    textTransform: ['uppercase', 'lowercase', 'capitalize', 'none'],
+    top: vars.sizes,
     wordBreak: ['normal', 'keep-all', 'break-word', 'break-all'],
-    listStyleType: ['none'],
-    objectFit: ['cover', 'contain'],
+    zIndex: [-1, 0, 1],
   },
 });