Add ComposingCard component with Storybook documentation

packages/ui-components/src/index.ts

@@ -15,6 +15,7 @@ export * from './ui/checkbox';
 export * from './ui/collapsible';
 export * from './ui/color-picker';
 export * from './ui/command';
+export * from './ui/composing-card';
 export * from './ui/context-menu';
 export * from './ui/data-table';
 export * from './ui/data-table-column-header';

packages/ui-components/src/stories/composing-card.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComposingCard } from '@/ui/composing-card';
+import { ThemeAwareDecorator } from '../../.storybook/decorators';
+
+/**
+ * A responsive card wrapper that accepts children and supports transparent or solid background.
+ */
+const meta = {
+  title: 'ui/ComposingCard',
+  component: ComposingCard,
+  tags: ['autodocs'],
+  args: {
+    className: 'w-96 p-6',
+    transparent: false,
+  },
+  render: (args) => (
+    <ComposingCard {...args}>
+      <p className="text-sm text-foreground">Card content goes here.</p>
+    </ComposingCard>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [ThemeAwareDecorator],
+} satisfies Meta<typeof ComposingCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default card with the component's solid background.
+ */
+export const Default: Story = {};
+
+/**
+ * Card with transparent background.
+ */
+export const Transparent: Story = {
+  args: {
+    transparent: true,
+  },
+};

packages/ui-components/src/ui/composing-card.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { cn } from '../lib/cn';
+
+type ComposingCardProps = React.HTMLAttributes<HTMLDivElement> & {
+  transparent?: boolean;
+};
+
+const ComposingCard = React.forwardRef<HTMLDivElement, ComposingCardProps>(
+  ({ className, transparent = false, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'w-full rounded-2xl border',
+        {
+          'bg-transparent': transparent,
+          'bg-neutral-50 dark:bg-background': !transparent,
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+ComposingCard.displayName = 'ComposingCard';
+
+export { ComposingCard };