Add Separator component (#343)

packages/storybook/src/components/separator/index.stories.tsx

@@ -0,0 +1,22 @@
+import { Separator } from "@spear-ai/ui/components/separator";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const PreviewSeparator = () => (
+  <div className="w-full max-w-xs">
+    <Separator />
+  </div>
+);
+
+const meta = {
+  component: PreviewSeparator,
+} satisfies Meta<typeof PreviewSeparator>;
+
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;

packages/ui/src/components/separator.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, HTMLAttributes } from "react";
+import { cx } from "@/helpers/cx";
+
+export const Separator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...properties }, reference) => {
+    const mergedClassName = cx(
+      "before:bg-neutral-a-6 h-px w-full before:-mt-px before:block before:h-px before:w-full before:content-['']",
+      className,
+    );
+    return <div className={mergedClassName} {...properties} ref={reference} />;
+  },
+);
+
+Separator.displayName = "Separator";