From 98eee67615fa9ea27b1886555ee17b233dcaaf4a Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Wed, 18 Mar 2026 16:35:45 +0100
Subject: [PATCH 1/4] Add ComposingCard component with Storybook documentation

---
 packages/ui-components/src/index.ts           |  1 +
 .../src/stories/composing-card.stories.tsx    | 44 +++++++++++++++++++
 .../ui-components/src/ui/composing-card.tsx   | 26 +++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 packages/ui-components/src/stories/composing-card.stories.tsx
 create mode 100644 packages/ui-components/src/ui/composing-card.tsx

diff --git a/packages/ui-components/src/index.ts b/packages/ui-components/src/index.ts
index f7ded3fe6..c6c655a52 100644
--- a/packages/ui-components/src/index.ts
+++ b/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';
diff --git a/packages/ui-components/src/stories/composing-card.stories.tsx b/packages/ui-components/src/stories/composing-card.stories.tsx
new file mode 100644
index 000000000..de781b6ae
--- /dev/null
+++ b/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 solid background (bg-input).
+ */
+export const Default: Story = {};
+
+/**
+ * Card with transparent background.
+ */
+export const Transparent: Story = {
+  args: {
+    transparent: true,
+  },
+};
diff --git a/packages/ui-components/src/ui/composing-card.tsx b/packages/ui-components/src/ui/composing-card.tsx
new file mode 100644
index 000000000..c759d5d65
--- /dev/null
+++ b/packages/ui-components/src/ui/composing-card.tsx
@@ -0,0 +1,26 @@
+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(
+        'rounded-2xl border',
+        transparent ? 'bg-transparent' : 'bg-input',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+ComposingCard.displayName = 'ComposingCard';
+
+export { ComposingCard };

From 9dbef93bd7eccb35b750f28ac202e8e82ad741e1 Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Wed, 18 Mar 2026 16:52:09 +0100
Subject: [PATCH 2/4] Update ComposingCard component styling with full width
 and neutral background colors

---
 packages/ui-components/src/ui/composing-card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui-components/src/ui/composing-card.tsx b/packages/ui-components/src/ui/composing-card.tsx
index c759d5d65..ef779cd66 100644
--- a/packages/ui-components/src/ui/composing-card.tsx
+++ b/packages/ui-components/src/ui/composing-card.tsx
@@ -11,8 +11,8 @@ const ComposingCard = React.forwardRef<HTMLDivElement, ComposingCardProps>(
     <div
       ref={ref}
       className={cn(
-        'rounded-2xl border',
-        transparent ? 'bg-transparent' : 'bg-input',
+        'w-full rounded-2xl border',
+        transparent ? 'bg-transparent' : 'bg-neutral-50 dark:bg-background',
         className,
       )}
       {...props}

From bc60be5f50fcdad52068f9e61fe751099a5f85dd Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Wed, 18 Mar 2026 16:52:59 +0100
Subject: [PATCH 3/4] Update ComposingCard story documentation comment

---
 packages/ui-components/src/stories/composing-card.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui-components/src/stories/composing-card.stories.tsx b/packages/ui-components/src/stories/composing-card.stories.tsx
index de781b6ae..10aea966c 100644
--- a/packages/ui-components/src/stories/composing-card.stories.tsx
+++ b/packages/ui-components/src/stories/composing-card.stories.tsx
@@ -30,7 +30,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 /**
- * Default card with solid background (bg-input).
+ * Default card with the component's solid background.
  */
 export const Default: Story = {};
 

From fb8f0618a7dda461dabd5dee5c7c6df03f2c9aff Mon Sep 17 00:00:00 2001
From: Roman Snapko <roman@openops.com>
Date: Thu, 19 Mar 2026 14:29:35 +0100
Subject: [PATCH 4/4] Refactor ComposingCard background styling to use object
 notation in cn utility

---
 packages/ui-components/src/ui/composing-card.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui-components/src/ui/composing-card.tsx b/packages/ui-components/src/ui/composing-card.tsx
index ef779cd66..85ec404b6 100644
--- a/packages/ui-components/src/ui/composing-card.tsx
+++ b/packages/ui-components/src/ui/composing-card.tsx
@@ -12,7 +12,10 @@ const ComposingCard = React.forwardRef<HTMLDivElement, ComposingCardProps>(
       ref={ref}
       className={cn(
         'w-full rounded-2xl border',
-        transparent ? 'bg-transparent' : 'bg-neutral-50 dark:bg-background',
+        {
+          'bg-transparent': transparent,
+          'bg-neutral-50 dark:bg-background': !transparent,
+        },
         className,
       )}
       {...props}