feat(ui,dashboard): Move Divider component to UI package (#11357)

packages/design-system/ui/src/components/divider/divider.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import * as React from "react"
+
+import { Divider } from "./divider"
+
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  parameters: {
+    layout: "centered",
+  },
+  render: (args) => (
+    <div className="flex h-[200px] w-[200px] items-center justify-center">
+      <Divider {...args} />
+    </div>
+  ),
+}
+
+export default meta
+
+type Story = StoryObj<typeof Divider>
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+}
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+  },
+}
+
+export const Dashed: Story = {
+  args: {
+    variant: "dashed",
+  },
+}

packages/design-system/ui/src/components/divider/divider.tsx

@@ -0,0 +1,37 @@
+import { clx } from "@/utils/clx"
+import * as React from "react"
+
+interface DividerProps
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  orientation?: "horizontal" | "vertical"
+  variant?: "dashed" | "solid"
+}
+
+export const Divider = ({
+  orientation = "horizontal",
+  variant = "solid",
+  className,
+  ...props
+}: DividerProps) => {
+  return (
+    <div
+      aria-orientation={orientation}
+      role="separator"
+      className={clx(
+        "border-ui-border-base",
+        {
+          "w-full border-t":
+            orientation === "horizontal" && variant === "solid",
+          "h-full border-l": orientation === "vertical" && variant === "solid",
+          "bg-transparent": variant === "dashed",
+          "h-px w-full bg-[linear-gradient(90deg,var(--border-strong)_1px,transparent_1px)] bg-[length:4px_1px]":
+            variant === "dashed" && orientation === "horizontal",
+          "h-full w-px bg-[linear-gradient(0deg,var(--border-strong)_1px,transparent_1px)] bg-[length:1px_4px]":
+            variant === "dashed" && orientation === "vertical",
+        },
+        className
+      )}
+      {...props}
+    />
+  )
+}

packages/design-system/ui/src/components/divider/index.ts

@@ -0,0 +1 @@
+export * from "./divider"