feat: add Description component

src/Descriptions/demos/Playground.tsx

@@ -0,0 +1,49 @@
+import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
+import type { DescriptionsProps } from '@yuntijs/ui';
+import { Descriptions } from '@yuntijs/ui';
+
+export default () => {
+  const store = useCreateStore();
+  const control: DescriptionsProps | any = useControls(
+    {
+      title: 'YuntiUI',
+      bordered: false,
+      colon: false,
+      column: 1,
+      extra: 'extra',
+      layout: {
+        options: ['horizontal', 'vertical'],
+        value: 'horizontal',
+      },
+      size: {
+        options: ['default', 'middle', 'small'],
+        value: 'default',
+      },
+    },
+    { store }
+  );
+  return (
+    <StoryBook levaStore={store}>
+      <Descriptions
+        {...control}
+        items={[
+          {
+            key: 'Themeable',
+            label: 'Themeable',
+            children: 'Customize default themes',
+          },
+          {
+            key: 'Fast',
+            label: 'Fast',
+            children: 'voids unnecessary styles props',
+          },
+          {
+            key: 'Light & Dark UI',
+            label: 'Light & Dark UI',
+            children: 'Automatic dark mode recognition',
+          },
+        ]}
+      />
+    </StoryBook>
+  );
+};

src/Descriptions/demos/index.tsx

@@ -0,0 +1,29 @@
+import { Descriptions } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Descriptions
+      colon={false}
+      column={2}
+      items={[
+        {
+          key: 'Themeable',
+          label: 'Themeable',
+          children: 'Customize default themes',
+        },
+        {
+          key: 'Fast',
+          label: 'Fast',
+          children: 'voids unnecessary styles props',
+        },
+        {
+          key: 'Light & Dark UI',
+          label: 'Light & Dark UI',
+          children: 'Automatic dark mode recognition',
+        },
+      ]}
+      labelStyle={{ width: 120 }}
+      title="YuntiUI"
+    />
+  );
+};

src/Descriptions/index.md

@@ -0,0 +1,54 @@
+---
+nav: Components
+group: Data Display
+title: Descriptions
+description: Display multiple read-only fields in a group.
+---
+
+## Usage
+
+based on antd [Descriptions](https://ant.design/components/descriptions-cn/) component.
+
+### Simple usage
+
+```jsx | pure
+import { Descriptions } from '@yuntijs/ui';
+
+export default () => {
+  return (
+    <Descriptions
+      title="YuntiUI"
+      column={2}
+      colon={false}
+      labelStyle={{ width: 120 }}
+      items={[
+        {
+          key: 'Themeable',
+          label: 'Themeable',
+          children: 'Customize default themes',
+        },
+        {
+          key: 'Fast',
+          label: 'Fast',
+          children: 'voids unnecessary styles props',
+        },
+        {
+          key: 'Light & Dark UI',
+          label: 'Light & Dark UI',
+          children: 'Automatic dark mode recognition',
+        },
+      ]}
+    />
+  );
+};
+```
+
+<code src="./demos/index.tsx" center></code>
+
+## Playground
+
+<code src="./demos/Playground.tsx" nopadding></code>
+
+## APIs
+
+<API></API>

src/Descriptions/index.tsx

@@ -0,0 +1,42 @@
+import {
+  Descriptions as AntdDescriptions,
+  type DescriptionsProps as AntdDescriptionsProps,
+} from 'antd';
+import React from 'react';
+
+import { useStyles } from './style';
+
+export interface CustomDescriptionsProps {
+  borderedBottom?: boolean;
+  borderedBottomDashed?: boolean;
+  borderedTop?: boolean;
+  borderedTopDashed?: boolean;
+  itemStyle?: React.CSSProperties;
+}
+export interface DescriptionsProps extends AntdDescriptionsProps, CustomDescriptionsProps {}
+
+export const Descriptions: React.FC<DescriptionsProps> & {
+  Item: typeof AntdDescriptions.Item;
+} = props => {
+  const {
+    className,
+    borderedBottom,
+    borderedBottomDashed,
+    borderedTop,
+    borderedTopDashed,
+    itemStyle,
+    ...otherProps
+  } = props;
+  const { styles, cx } = useStyles({
+    borderedBottom,
+    borderedBottomDashed,
+    borderedTop,
+    borderedTopDashed,
+    itemStyle,
+    size: otherProps.size,
+  });
+  return <AntdDescriptions {...otherProps} className={cx(styles.custom, className)} />;
+};
+
+export default Descriptions;
+Descriptions.Item = AntdDescriptions.Item;

src/Descriptions/style.ts

@@ -0,0 +1,80 @@
+import { createStyles } from 'antd-style';
+
+import { DescriptionsProps } from './index';
+
+export const useStyles = createStyles(
+  (
+    { css, token, prefixCls },
+    {
+      borderedBottom,
+      borderedBottomDashed,
+      borderedTop,
+      borderedTopDashed,
+      itemStyle,
+      size,
+    }: DescriptionsProps
+  ) => {
+    const descriptionsContentPadding = {
+      small: `${token.paddingXS}px ${token.padding}px`,
+      middle: `${token.padding}px ${token.paddingLG}px`,
+      default: `${token.paddingSM}px ${token.paddingLG}px`,
+    };
+    const hasCustomSizeStyle = borderedBottom || borderedBottomDashed;
+    const itemStyleString =
+      itemStyle &&
+      Object.keys(itemStyle)
+        // @ts-ignore
+        .map(key => `${key}:${itemStyle[key]};`)
+        .join('');
+    return {
+      custom: css`
+        .${prefixCls}-descriptions-item-content {
+          align-items: center !important;
+        }
+        .${prefixCls}-descriptions-row > td {
+          padding-bottom: 8px !important;
+          padding-top: 8px !important;
+          ${itemStyleString}
+        }
+        ${hasCustomSizeStyle &&
+        size &&
+        css`
+          .${prefixCls}-descriptions-item-label, .${prefixCls}-descriptions-item-content {
+            padding: ${descriptionsContentPadding[size]};
+          }
+          .${prefixCls}-descriptions-item {
+            padding-bottom: 0 !important;
+          }
+          table {
+            border-spacing: 0 !important;
+          }
+        `}
+        ${borderedBottom &&
+        css`
+          .${prefixCls}-descriptions-item {
+            border-bottom: 1px solid ${token.colorSplit};
+          }
+        `}
+        ${borderedBottomDashed &&
+        css`
+          .${prefixCls}-descriptions-item {
+            border-bottom: 1px dashed ${token.colorSplit};
+          }
+        `}
+        ${borderedTop &&
+        css`
+          .${prefixCls}-descriptions-item {
+            border-top: 1px solid ${token.colorSplit};
+          }
+        `}
+        ${borderedTopDashed &&
+        css`
+          .${prefixCls}-descriptions-item {
+            border-top: 1px dashed ${token.colorSplit};
+          }
+        `}
+      `,
+    };
+  },
+  { hashPriority: 'low' }
+);

src/index.ts

@@ -8,6 +8,7 @@ export * from './Tree';
 // ~ custom antd
 export * from './Alert';
 export * from './Card';
+export * from './Descriptions';
 
 // ~ antd
 export {
@@ -31,11 +32,29 @@ export {
   type CalendarProps,
   Carousel,
   type CarouselProps,
+  Cascader,
+  type CascaderProps,
   Checkbox,
   type CheckboxProps,
+  Col,
+  Collapse,
+  type CollapseProps,
   ColorPicker,
   type ColorPickerProps,
+  type ColProps, // @todo center style
+  DatePicker,
+  type DatePickerProps,
 } from 'antd';
 
+// ~ @lobehub/ui
+export {
+  Highlighter,
+  type HighlighterProps,
+  Markdown,
+  type MarkdownProps,
+  SyntaxHighlighter,
+  type SyntaxHighlighterProps,
+} from '@lobehub/ui';
+
 // ~ antd-style
 export { useResponsive, useTheme, useThemeMode } from 'antd-style';