feat: add Card component (#88)

.changeset/moody-dryers-doubt.md

@@ -0,0 +1,5 @@
+---
+"@babylonlabs-io/bbn-core-ui": minor
+---
+
+add Card component

src/components/Card/Card.css

@@ -0,0 +1,3 @@
+.bbn-card {
+  @apply rounded border border-primary-dark/20 bg-secondary-contrast p-6;
+}

src/components/Card/Card.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card } from "./Card";
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Card" },
+};

src/components/Card/Card.tsx

@@ -0,0 +1,12 @@
+import { type PropsWithChildren, createElement } from "react";
+import { twJoin } from "tailwind-merge";
+import "./Card.css";
+
+interface CardProps extends PropsWithChildren {
+  as?: string;
+  className?: string;
+}
+
+export function Card({ as = "div", className, children }: CardProps) {
+  return createElement(as, { className: twJoin("bbn-card", className) }, children);
+}

src/components/Card/index.tsx

@@ -0,0 +1 @@
+export { Card } from "./Card";

src/index.tsx

@@ -12,6 +12,7 @@ export * from "./components/Portal";
 export * from "./components/Loader";
 export * from "./components/Table";
 export * from "./components/Popover";
+export * from "./components/Card";
 
 export * from "./widgets/form/Form";
 export * from "./widgets/form/NumberField";