From 64b95daff4adab80b23f4a261da3226b4f60f259 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Mon, 1 Sep 2025 19:40:01 +0530
Subject: [PATCH] [WEB-4740] feat: add propel seperator (#7637)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: global css file added to tailwind config package

* chore: tailwind config updated

* chore: cn utility function added to propel package

* chore: storybook init

* fix: format error

* chore: code refactor

* chore: code refactor

* fix: format error

* feat: add propel seperator component

* :lock: chore: updated lock file

* ✏️ fix: typo in separator filename and some linting issues

* ♻️ refactor: replace clsx with cn utility in Separator component for class name management

* 🐛 fix: re-added twMerge

* 🧹 cleanup: remove unnecessary blank line in Separator component

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
---
 .../src/separator/separator.stories.tsx       | 50 +++++++++++++++++++
 packages/propel/src/separator/separator.tsx   | 29 +++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 packages/propel/src/separator/separator.stories.tsx
 create mode 100644 packages/propel/src/separator/separator.tsx

diff --git a/packages/propel/src/separator/separator.stories.tsx b/packages/propel/src/separator/separator.stories.tsx
new file mode 100644
index 000000000..61beae48d
--- /dev/null
+++ b/packages/propel/src/separator/separator.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Separator } from "./separator";
+
+const meta: Meta<typeof Separator> = {
+  title: "Components/Separator",
+  component: Separator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Separator>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[300px] space-y-4">
+      <div>Content Above</div>
+      <Separator />
+      <div>Content Below</div>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-[100px] items-center space-x-4">
+      <div>Left Content</div>
+      <Separator orientation="vertical" />
+      <div>Right Content</div>
+    </div>
+  ),
+};
+
+export const WithinContainer: Story = {
+  render: () => (
+    <div className="w-[300px] rounded-lg border p-6 space-y-4">
+      <div className="space-y-2">
+        <h4 className="font-medium leading-none">Section 1</h4>
+        <p className="text-sm text-muted-foreground">Description for section 1</p>
+      </div>
+      <Separator />
+      <div className="space-y-2">
+        <h4 className="font-medium leading-none">Section 2</h4>
+        <p className="text-sm text-muted-foreground">Description for section 2</p>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
new file mode 100644
index 000000000..5e02309dc
--- /dev/null
+++ b/packages/propel/src/separator/separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator";
+import { cn } from "../utils";
+
+interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive> {
+  /**
+   * The orientation of the separator
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+const Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive>, SeparatorProps>(
+  ({ orientation = "horizontal", ...props }, ref) => (
+    <SeparatorPrimitive
+      ref={ref}
+      orientation={orientation}
+      data-slot="separator"
+      data-orientation={orientation}
+      {...props}
+      className={cn("bg-custom-border-200", "shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px")}
+    />
+  )
+);
+
+Separator.displayName = "Separator";
+
+export { Separator };
+export type { SeparatorProps };