design system token v0.1

stories/Layout/Separator.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Separator } from '@/components/ui/separator'
+
+const meta = {
+  title: 'Layout/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+    decorative: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Separator>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-75">
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium leading-none">Greyhaven Design System</h4>
+          <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
+        </div>
+        <Story />
+        <div className="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <div>Docs</div>
+          <div>Source</div>
+        </div>
+      </div>
+    ),
+  ],
+}
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-5 items-center space-x-4 text-sm">
+        <div>Blog</div>
+        <Story />
+        <div>Docs</div>
+        <Story />
+        <div>Source</div>
+      </div>
+    ),
+  ],
+}