feat(box): support className

.changeset/orange-falcons-shake.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/box": patch
+---
+
+Support `className` for `Box`

packages/box/package.json

@@ -37,6 +37,7 @@
 		"@launchpad-ui/vars": "workspace:~",
 		"@radix-ui/react-slot": "1.1.0",
 		"@vanilla-extract/dynamic": "2.1.0",
+		"class-variance-authority": "0.7.0",
 		"rainbow-sprinkles": "0.17.3"
 	},
 	"peerDependencies": {

packages/box/src/Box.tsx

@@ -1,27 +1,21 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes } from 'react';
 import type { Sprinkles } from './styles/rainbow-sprinkles.css';
 
 import { Slot } from '@radix-ui/react-slot';
+import { cx } from 'class-variance-authority';
 
 import { rainbowSprinkles } from './styles/rainbow-sprinkles.css';
 
-type BoxProps = Sprinkles & {
-	children?: ReactNode;
+interface BoxProps extends Sprinkles, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
 	asChild?: boolean;
-	'data-test-id'?: string;
-};
+}
 
-const Box = ({
-	asChild,
-	children,
-	'data-test-id': testId = asChild ? undefined : 'box',
-	...props
-}: BoxProps) => {
+const Box = ({ asChild, children, className: classes, ...props }: BoxProps) => {
 	const Component = asChild ? Slot : 'div';
 	const { className, style, otherProps } = rainbowSprinkles(props);
 
 	return (
-		<Component className={className} style={style} data-test-id={testId} {...otherProps}>
+		<Component className={cx(classes, className)} style={style} {...otherProps}>
 			{children}
 		</Component>
 	);

packages/box/src/styles/rainbow-sprinkles.css.ts

@@ -45,6 +45,12 @@ const responsiveProperties = defineProperties({
 		paddingRight: vars.spacing,
 		paddingTop: vars.spacing,
 		paddingBottom: vars.spacing,
+		paddingBlock: vars.spacing,
+		paddingBlockEnd: vars.spacing,
+		paddingBlockStart: vars.spacing,
+		paddingInline: vars.spacing,
+		paddingInlineEnd: vars.spacing,
+		paddingInlineStart: vars.spacing,
 		top: vars.spacing,
 		left: vars.spacing,
 		right: vars.spacing,
@@ -55,6 +61,12 @@ const responsiveProperties = defineProperties({
 		marginLeft: vars.spacing,
 		marginRight: vars.spacing,
 		marginBottom: vars.spacing,
+		marginBlock: vars.spacing,
+		marginBlockEnd: vars.spacing,
+		marginBlockStart: vars.spacing,
+		marginInline: vars.spacing,
+		marginInlineEnd: vars.spacing,
+		marginInlineStart: vars.spacing,
 		borderRadius: vars.borderRadius,
 		borderWidth: vars.borderWidth,
 		font: typographies,

packages/box/stories/Box.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 
-import { Button } from '@launchpad-ui/button';
+import { Button } from '@launchpad-ui/components';
 
 import { Box } from '../src';