feat: add divider component

apps/docs/data/design/material-you/components/divider.mdx

@@ -0,0 +1,32 @@
+---
+title: Divider
+---
+
+# Divider
+
+The `Divider` component is used to separate content in a list or a layout.
+
+<Demo src="/demos/material-you/divider" />
+
+### Usage
+
+```tsx
+import { BakaDivider } from "baka-ui";
+
+function MyComponent() {
+  return (
+    <BakaNavigation>
+      <BakaNavigationItem>{/* content */}</BakaNavigationItem>
+      <BakaNavigationItem>{/* content */}</BakaNavigationItem>
+      <BakaDivider />
+      <BakaNavigationItem>{/* content */}</BakaNavigationItem>
+    </BakaNavigation>
+  );
+}
+```
+
+### Examples
+
+#### Vertical Divider
+
+<Demo src="/demos/material-you/divider/vertical" style={{ height: 450 }} />

apps/docs/src/app/demos/material-you/divider/page.tsx

@@ -0,0 +1,5 @@
+import { BakaDivider } from "baka-ui";
+
+export default function DividerDemo() {
+  return <BakaDivider style={{ width: 300 }} />;
+}

apps/docs/src/app/demos/material-you/divider/stories/divider.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import DividerStory, { DividerStoryProps, defaultProps } from "./page";
+
+const meta: Meta = {
+  title: "Material You/Divider",
+  component: (props: DividerStoryProps) => <DividerStory {...props} />,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    children: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Basic: Story = {
+  args: {
+    ...defaultProps,
+  },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+  },
+};

apps/docs/src/app/demos/material-you/divider/stories/page.tsx

@@ -0,0 +1,19 @@
+import { BakaDivider, BakaDividerProps } from "baka-ui";
+
+export type DividerStoryProps = BakaDividerProps & {
+  orientation?: "horizontal" | "vertical";
+};
+
+export const defaultProps: DividerStoryProps = {
+  orientation: "horizontal",
+};
+
+export default function DividerStoryDemo(props: DividerStoryProps) {
+  const args = { ...defaultProps, ...props };
+
+  return args.orientation === "horizontal" ? (
+    <BakaDivider style={{ width: 300 }} />
+  ) : (
+    <BakaDivider style={{ width: 1, height: 300 }} />
+  );
+}

apps/docs/src/app/demos/material-you/divider/vertical/page.tsx

@@ -0,0 +1,5 @@
+import { BakaDivider } from "baka-ui";
+
+export default function DividerDemo() {
+  return <BakaDivider style={{ width: 1, height: 300 }} />;
+}