[ui][horizontal divider] implementation

apps/storybook/stories/horizontal-divider.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { ComponentMeta } from '@storybook/react';
+import { HorizontalDivider } from '@tih/ui';
+
+export default {
+  argTypes: {},
+  component: HorizontalDivider,
+  title: 'HorizontalDivider',
+} as ComponentMeta<typeof HorizontalDivider>;
+
+export function Basic() {
+  return (
+    <div>
+      <p className="text-sm">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+      <HorizontalDivider />
+      <p className="text-sm">
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+    </div>
+  );
+}

packages/ui/src/HorizontalDivider/HorizontalDivider.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+
+type Props = Readonly<{
+  className?: string;
+}>;
+
+export default function HorizontalDivider({ className }: Props) {
+  return (
+    <hr
+      aria-hidden={true}
+      className={clsx('my-2 h-0 border-t border-slate-200', className)}
+    />
+  );
+}

packages/ui/src/index.tsx

@@ -16,6 +16,9 @@ export { default as Dialog } from './Dialog/Dialog';
 // DropdownMenu
 export * from './DropdownMenu/DropdownMenu';
 export { default as DropdownMenu } from './DropdownMenu/DropdownMenu';
+// HorizontalDivider
+export * from './HorizontalDivider/HorizontalDivider';
+export { default as HorizontalDivider } from './HorizontalDivider/HorizontalDivider';
 // Select
 export * from './Select/Select';
 export { default as Select } from './Select/Select';