feat: divider

src/components/foundations/Divider/Divider.tsx

@@ -0,0 +1,37 @@
+import { forwardRef, HTMLAttributes } from 'react';
+import { cn } from 'lib/tailwind';
+
+interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical';
+  decorative?: boolean;
+}
+
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(
+  ({ className, orientation = 'horizontal', decorative, ...props }, ref) => {
+    /**
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
+     */
+    const ariaOrientation = orientation === 'vertical' ? orientation : undefined;
+    const semanticProps = decorative
+      ? { role: 'none' }
+      : { 'aria-orientation': ariaOrientation, role: 'separator' };
+
+    console.log(className);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'shrink-0',
+          'bg-black',
+          orientation === 'horizontal' ? 'h-[0.5px] w-full' : 'h-full w-[0.5px]',
+          className
+        )}
+        {...semanticProps}
+        {...props}
+      />
+    );
+  }
+);
+
+Divider.displayName = 'Divider';

src/components/foundations/Divider/examples/DividerCustomStyle.tsx

@@ -0,0 +1,11 @@
+import { Divider } from '../Divider';
+
+export function DividerCustomStyle() {
+  return (
+    <div className="max-w-md flex flex-col gap-2">
+      <div>Content above</div>
+      <Divider className="bg-accent" />
+      <div>Content below</div>
+    </div>
+  );
+}

src/components/foundations/Divider/examples/DividerHorizontal.tsx

@@ -0,0 +1,13 @@
+import { Divider } from '../Divider';
+
+export function DividerHorizontal() {
+  return (
+    <div className="max-w-md">
+      <div>Area 1</div>
+      <Divider />
+      <div>Area 2</div>
+      <Divider decorative />
+      <div>Area 3</div>
+    </div>
+  );
+}

src/components/foundations/Divider/examples/DividerVertical.tsx

@@ -0,0 +1,11 @@
+import { Divider } from '../Divider';
+
+export function DividerVertical() {
+  return (
+    <div className="flex items-center gap-2 h-[30px]">
+      <div>Content Left</div>
+      <Divider orientation="vertical" />
+      <div>Content Right</div>
+    </div>
+  );
+}

src/components/foundations/Divider/index.ts

@@ -0,0 +1 @@
+export * from './Divider';

src/pages/components/divider.mdx

@@ -0,0 +1,60 @@
+import { Divider } from 'components/foundations/Divider';
+import { PreviewBox } from 'components/PreviewBox';
+import { FileCode } from 'components/FileCode';
+import { ComponentPreview } from 'components/ComponentPreview';
+
+# Divider
+
+A primitive component used to visually separate content.
+
+<PreviewBox>
+  <div className="max-w-md">
+    <div>Content above</div>
+    <Divider />
+    <div>Content below</div>
+  </div>
+</PreviewBox>
+
+## Install
+
+<FileCode path="components/foundations/Divider" />
+
+## API Reference
+
+| Prop          |              Type              |  Default Value |
+| :------------ | :----------------------------: | -------------: |
+| `orientation` | `'horizontal'` \| `'vertical'` | `'horizontal'` |
+| `decorative`  |           `boolean`            |      undefined |
+| `className`   |            `string`            |      undefined |
+
+### Important Notes
+
+- **decorative**: This prop should be set to `true` only when the divider is purely visual and doesn't represent a meaningful break in content.
+  - When `true`: The divider will be hidden from screen readers (`role="none"`) and not included in the accessibility tree
+  - When `false` or undefined: The divider will be announced as a separator to screen readers (`role="separator"`)
+- **orientation**: Determines the direction of the divider. When set to 'vertical', this information is also conveyed to screen readers
+- **className**: Allows for custom styling through CSS classes
+
+## Usage
+
+```tsx copy
+import { Divider } from '[path]/Divider';
+```
+
+```tsx copy
+<Divider />
+```
+
+## Examples
+
+### Horizontal
+
+<ComponentPreview path="components/foundations/Divider/examples/DividerHorizontal" />
+
+### Vertical
+
+<ComponentPreview path="components/foundations/Divider/examples/DividerVertical" />
+
+### Custom Style
+
+<ComponentPreview path="components/foundations/Divider/examples/DividerCustomStyle" />