feat(ui): add separator component

packages/ui/src/components/index.ts

@@ -28,6 +28,9 @@ export { DMenu, DMenuGroup, DMenuItem, DMenuSub } from './menu';
 export type { DRadioProps, DRadioGroupProps } from './radio';
 export { DRadio, DRadioGroup } from './radio';
 
+export type { DSeparatorProps } from './separator';
+export { DSeparator } from './separator';
+
 export type { DTabProps, DTabsProps } from './tabs';
 export { DTab, DTabs } from './tabs';
 

packages/ui/src/components/separator/README.md

@@ -0,0 +1,24 @@
+---
+group: Layout
+title: Separator
+---
+
+A separator is a thin line that groups content in lists and layouts.
+
+## When To Use
+
+Separators separate content into clear groups.
+
+## API
+
+### DSeparatorProps
+
+Extend `React.HTMLAttributes<HTMLElement>`.
+
+<!-- prettier-ignore-start -->
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| dTag | The `tag` of the rendered element | string | 'hr' |
+| dTextAlign | The position of the separator content | 'left' \| 'right' \| 'center' | 'left' |
+| dVertical | Vertical separator | boolean | false |
+<!-- prettier-ignore-end -->

packages/ui/src/components/separator/README.zh-Hant.md

@@ -0,0 +1,23 @@
+---
+title: 分隔符
+---
+
+分隔符是对列表和布局中的内容进行分组的一条细线。
+
+## 何时使用
+
+分隔符可以将内容分成清晰的几组。
+
+## API
+
+### DSeparatorProps
+
+继承 `React.HTMLAttributes<HTMLElement>`。
+
+<!-- prettier-ignore-start -->
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| dTag | 渲染元素的 `tag` | string | 'hr' |
+| dTextAlign | 分隔符内容的位置 | 'left' \| 'right' \| 'center' | 'left' |
+| dVertical | 垂直分隔符 | boolean | false |
+<!-- prettier-ignore-end -->

packages/ui/src/components/separator/Separator.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { usePrefixConfig, useComponentConfig } from '../../hooks';
+import { getClassName } from '../../utils';
+
+export type DSeparatorRef = HTMLButtonElement;
+
+export interface DSeparatorProps extends React.HTMLAttributes<HTMLElement> {
+  dTag?: string;
+  dTextAlign?: 'left' | 'right' | 'center';
+  dVertical?: boolean;
+}
+
+export function DSeparator(props: DSeparatorProps) {
+  const {
+    dTag = 'hr',
+    dTextAlign = 'left',
+    dVertical = false,
+    className,
+    children,
+    onClick,
+    ...restProps
+  } = useComponentConfig(DSeparator.name, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  //#endregion
+
+  return React.createElement(
+    children && dTag === 'hr' ? 'div' : dTag,
+    {
+      ...restProps,
+      className: getClassName(className, `${dPrefix}separator`, {
+        [`${dPrefix}separator--text-${dTextAlign}`]: children,
+        [`${dPrefix}separator--vertical`]: dVertical,
+      }),
+      role: 'separator',
+      'aria-orientation': dVertical ? 'vertical' : 'horizontal',
+    },
+    children ? <div className={`${dPrefix}separator__text`}>{children}</div> : null
+  );
+}

packages/ui/src/components/separator/demos/1.Basic.md

@@ -0,0 +1,30 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { DSeparator } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <>
+      Some content...
+      <DSeparator></DSeparator>
+      Some content...
+      <DSeparator></DSeparator>
+      Some content...
+      <DSeparator></DSeparator>
+    </>
+  );
+}
+```

packages/ui/src/components/separator/demos/2.List.md

@@ -0,0 +1,34 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 列表分隔符
+---
+
+# en-US
+
+By default, the dividing line will be rendered as a \<hr\>.
+
+We recommend setting `dTag` to `'li'` in the list to render \<li\>.
+
+# zh-Hant
+
+默认情况下，分隔符会渲染成一个 \<hr\>。
+
+我们建议列表中将 `dTag` 设置为 `'li'` 以渲染 \<li\>。
+
+```tsx
+import { DSeparator } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <ul>
+      <li>Item 1</li>
+      <DSeparator dTag="li"></DSeparator>
+      <li>Item 2</li>
+      <DSeparator dTag="li"></DSeparator>
+      <li>Item 3</li>
+      <DSeparator dTag="li"></DSeparator>
+    </ul>
+  );
+}
+```

packages/ui/src/components/separator/demos/3.Text.md

@@ -0,0 +1,31 @@
+---
+title:
+  en-US: Separators with text
+  zh-Hant: 文本分隔符
+---
+
+# en-US
+
+Add extra content to the separator.
+
+# zh-Hant
+
+向分隔符添加额外内容。
+
+```tsx
+import { DSeparator } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <>
+      Some content...
+      <DSeparator>LEFT</DSeparator>
+      Some content...
+      <DSeparator dTextAlign="center">CENTER</DSeparator>
+      Some content...
+      <DSeparator dTextAlign="right">RIGHT</DSeparator>
+      Some content...
+    </>
+  );
+}
+```

packages/ui/src/components/separator/demos/4.Vertical.md

@@ -0,0 +1,60 @@
+---
+title:
+  en-US: Vertical separator
+  zh-Hant: 垂直分隔符
+---
+
+# en-US
+
+Set the vertical separator by `dVertical`.
+
+Only the `flex` container is supported.
+
+# zh-Hant
+
+通过 `dVertical` 设置垂直分隔符。
+
+仅支持 `flex` 容器使用。
+
+```tsx
+import { DSeparator } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <>
+      <div className="container">
+        <span>Some content...</span>
+        <DSeparator dVertical></DSeparator>
+        <span>Some content...</span>
+        <DSeparator dVertical></DSeparator>
+        <span>Some content...</span>
+      </div>
+      <br />
+      <div className="container">
+        <div>
+          CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of
+          work, because it can control the layout of multiple web pages all at once.
+        </div>
+        <DSeparator dTextAlign="center" dVertical>
+          CENTER
+        </DSeparator>
+        <div>
+          CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of
+          work, because it can control the layout of multiple web pages all at once.
+        </div>
+      </div>
+    </>
+  );
+}
+```
+
+```scss
+.container {
+  display: flex;
+
+  & > div:first-child,
+  & > div:last-child {
+    flex: 1 0 0;
+  }
+}
+```

packages/ui/src/components/separator/index.ts

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

packages/ui/src/styles/_components.scss

@@ -1,6 +1,7 @@
 @import 'components/affix';
 @import 'components/anchor';
 @import 'components/button';
+@import 'components/separator';
 @import 'components/drag-drop';
 @import 'components/drawer';
 @import 'components/dropdown';

packages/ui/src/styles/_variables.scss

@@ -20,7 +20,7 @@ $themes: (
   --#{$variable-prefix}text-color: #212529;
   --#{$variable-prefix}background-color: #fff;
   --#{$variable-prefix}shadow-color: rgb(0 0 0 / 20%);
-  --#{$variable-prefix}divider-color: #f0f0f0;
+  --#{$variable-prefix}divider-color: #eee;
   --#{$variable-prefix}indicator-background-color: #dfe1e6;
   --#{$variable-prefix}disabled-cover-color: rgb(255 255 255 / 50%);
 

packages/ui/src/styles/components/_separator.scss

@@ -0,0 +1,111 @@
+@mixin separator-text {
+  display: flex;
+  align-items: center;
+  margin: 24px 0;
+
+  background-color: unset;
+
+  &::before {
+    height: 1px;
+
+    background-color: var(--#{$variable-prefix}divider-color);
+
+    content: '';
+  }
+
+  &::after {
+    height: 1px;
+
+    background-color: var(--#{$variable-prefix}divider-color);
+
+    content: '';
+  }
+
+  &.#{$variable-prefix}separator--vertical {
+    width: auto;
+    margin: 0 24px;
+
+    &::before {
+      width: 1px;
+      height: unset;
+    }
+
+    &::after {
+      width: 1px;
+      height: unset;
+    }
+
+    .#{$variable-prefix}separator__text {
+      padding: 8px 0;
+    }
+  }
+}
+
+@include b(separator) {
+  width: 100%;
+  height: 1px;
+  margin: 16px 0;
+  padding: 0;
+  border: none;
+
+  list-style: none;
+
+  background-color: var(--#{$variable-prefix}divider-color);
+
+  @include m(text-left) {
+    @include separator-text;
+
+    &::before {
+      flex: 0 0 10%;
+    }
+
+    &::after {
+      flex: 1 0 0;
+    }
+  }
+
+  @include m(text-right) {
+    @include separator-text;
+
+    &::before {
+      flex: 1 0 0;
+    }
+
+    &::after {
+      flex: 0 0 10%;
+    }
+  }
+
+  @include m(text-center) {
+    @include separator-text;
+
+    &::before {
+      flex: 1 0 0;
+    }
+
+    &::after {
+      flex: 1 0 0;
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-flex;
+    flex-direction: column;
+    width: 1px;
+    height: auto;
+    margin: 4px 8px;
+
+    &::before {
+      flex: 1 0 0;
+
+      background-color: var(--#{$variable-prefix}divider-color);
+
+      content: '';
+    }
+  }
+
+  @include e(text) {
+    flex: 0 0 auto;
+    padding: 0 8px;
+  }
+}