init project

docs/data/joy/components/stack/DirectionStack.tsx

@@ -0,0 +1,26 @@
+import Sheet from '@mui/joy/Sheet';
+import Stack from '@mui/joy/Stack';
+import { styled } from '@mui/joy/styles';
+
+const Item = styled(Sheet)(({ theme }) => ({
+  ...theme.typography['body-sm'],
+  textAlign: 'center',
+  fontWeight: theme.fontWeight.md,
+  color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
+}));
+
+export default function DirectionStack() {
+  return (
+    <div>
+      <Stack direction="row" spacing={1}>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Stack>
+    </div>
+  );
+}