Feature/separator (#9)

* chore: add radix-ui/Separator

* feat: separator

---------

Co-authored-by: boomchanotai <[email protected]>

lib/components/Seperator/index.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Separator } from '.'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <div>
+      <div className='space-y-1'>
+        <h4 className='text-sm font-medium leading-none'>Radix Primitives</h4>
+        <p className='text-sm text-muted-foreground'>
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className='my-4' {...args} />
+      <div className='flex h-5 items-center space-x-4 text-sm'>
+        <div>Blog</div>
+        <Separator orientation='vertical' />
+        <div>Docs</div>
+        <Separator orientation='vertical' />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => (
+    <div>
+      <div className='flex h-5 items-center space-x-4 text-sm'>
+        <div>Blog</div>
+        <Separator {...args} />
+        <div>Docs</div>
+        <Separator {...args} />
+        <div>Source</div>
+      </div>
+    </div>
+  ),
+}
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <div className='space-y-4 text-center'>
+      <div>
+        <p>First Element</p>
+      </div>
+      <Separator {...args} />
+      <div>
+        <p>Second Element</p>
+      </div>
+    </div>
+  ),
+}

lib/components/Seperator/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.0",