@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43613492370

package/src/display/container.tsx

@@ -1,67 +1,67 @@
-/**
- * 容器与表面类展示组件。
- *
- * @module @dsh-plugin/dsh-ui-components/display/container
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { cx } from '../foundation/style.js'
-import { injectDisplayStyles } from './styles.js'
-
-/** {@link Card} 的 props。 */
-export type CardProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Card>, 'title'> & {
-  /** 卡片标题，渲染在带分隔线的头部。 */
-  title?: React.ReactNode
-  /** 头部右侧的操作区。 */
-  extra?: React.ReactNode
-  /** 视觉形态。`elevated` 用描边阴影，`flat` 用极细实线边框。 */
-  variant?: 'elevated' | 'flat'
-  /** 收紧内边距，用于密集列表。 */
-  tight?: boolean
-}
-
-/**
- * 一张卡片。
- *
- * @param props - 见 {@link CardProps}。
- * @returns 卡片元素。
- */
-export function Card({ title, extra, variant = 'elevated', tight, className, ...rest }: CardProps): React.ReactElement {
-  injectDisplayStyles()
-  return (
-    <Arco.Card
-      {...rest}
-      title={title}
-      extra={extra}
-      className={cx(variant === 'flat' && 'dsh-card--flat', tight === true && 'dsh-card--tight', Array.isArray(className) ? className.join(' ') : className)}
-    />
-  )
-}
-
-/** {@link Divider} 的 props。 */
-export type DividerProps = React.ComponentPropsWithoutRef<typeof Arco.Divider>
-
-/**
- * 一条分隔线。
- *
- * @param props - 见 {@link DividerProps}。
- * @returns 分隔线元素。
- */
-export function Divider(props: DividerProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Divider {...props} />
-}
-
-/** {@link Descriptions} 的 props。 */
-export type DescriptionsProps = React.ComponentPropsWithoutRef<typeof Arco.Descriptions>
-
-/**
- * 键值对描述列表。条目通过 `data` 数组提供，不单独导出子组件。
- *
- * @param props - 见 {@link DescriptionsProps}。
- * @returns 描述列表元素。
- */
-export function Descriptions(props: DescriptionsProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Descriptions {...props} />
-}
+/**
+ * 容器与表面类展示组件。
+ *
+ * @module @dsh-plugin/dsh-ui-components/display/container
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { cx } from '../foundation/style.js'
+import { injectDisplayStyles } from './styles.js'
+
+/** {@link Card} 的 props。 */
+export type CardProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Card>, 'title'> & {
+  /** 卡片标题，渲染在带分隔线的头部。 */
+  title?: React.ReactNode
+  /** 头部右侧的操作区。 */
+  extra?: React.ReactNode
+  /** 视觉形态。`elevated` 用描边阴影，`flat` 用极细实线边框。 */
+  variant?: 'elevated' | 'flat'
+  /** 收紧内边距，用于密集列表。 */
+  tight?: boolean
+}
+
+/**
+ * 一张卡片。
+ *
+ * @param props - 见 {@link CardProps}。
+ * @returns 卡片元素。
+ */
+export function Card({ title, extra, variant = 'elevated', tight, className, ...rest }: CardProps): React.ReactElement {
+  injectDisplayStyles()
+  return (
+    <Arco.Card
+      {...rest}
+      title={title}
+      extra={extra}
+      className={cx(variant === 'flat' && 'dsh-card--flat', tight === true && 'dsh-card--tight', Array.isArray(className) ? className.join(' ') : className)}
+    />
+  )
+}
+
+/** {@link Divider} 的 props。 */
+export type DividerProps = React.ComponentPropsWithoutRef<typeof Arco.Divider>
+
+/**
+ * 一条分隔线。
+ *
+ * @param props - 见 {@link DividerProps}。
+ * @returns 分隔线元素。
+ */
+export function Divider(props: DividerProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Divider {...props} />
+}
+
+/** {@link Descriptions} 的 props。 */
+export type DescriptionsProps = React.ComponentPropsWithoutRef<typeof Arco.Descriptions>
+
+/**
+ * 键值对描述列表。条目通过 `data` 数组提供，不单独导出子组件。
+ *
+ * @param props - 见 {@link DescriptionsProps}。
+ * @returns 描述列表元素。
+ */
+export function Descriptions(props: DescriptionsProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Descriptions {...props} />
+}

package/src/display/feedback.tsx

@@ -1,92 +1,92 @@
-/**
- * 排版、空状态与加载占位。
- *
- * @module @dsh-plugin/dsh-ui-components/display/feedback
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { injectDisplayStyles } from './styles.js'
-
-/** {@link Typography} 的 props。 */
-export type TypographyProps = React.ComponentPropsWithoutRef<typeof Arco.Typography>
-
-/**
- * 富文本排版容器，提供标题、段落、代码与引用样式。
- *
- * @param props - 见 {@link TypographyProps}。
- * @returns 排版元素。
- */
-export function Typography(props: TypographyProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Typography {...props} />
-}
-
-/** {@link Text} 的 props。 */
-export type TextProps = React.ComponentPropsWithoutRef<typeof Arco.Typography.Text>
-
-/**
- * 行内文本，可标记为次要、成功、警告或危险。
- *
- * @param props - 见 {@link TextProps}。
- * @returns 文本元素。
- */
-export function Text(props: TextProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Typography.Text {...props} />
-}
-
-/** {@link Paragraph} 的 props。 */
-export type ParagraphProps = React.ComponentPropsWithoutRef<typeof Arco.Typography.Paragraph>
-
-/**
- * 段落。
- *
- * @param props - 见 {@link ParagraphProps}。
- * @returns 段落元素。
- */
-export function Paragraph(props: ParagraphProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Typography.Paragraph {...props} />
-}
-
-/** {@link Empty} 的 props。 */
-export type EmptyProps = React.ComponentPropsWithoutRef<typeof Arco.Empty>
-
-/**
- * 空状态占位。
- *
- * @param props - 见 {@link EmptyProps}。
- * @returns 空状态元素。
- */
-export function Empty(props: EmptyProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Empty {...props} />
-}
-
-/** {@link Skeleton} 的 props。 */
-export type SkeletonProps = React.ComponentPropsWithoutRef<typeof Arco.Skeleton>
-
-/**
- * 骨架屏占位。
- *
- * @param props - 见 {@link SkeletonProps}。
- * @returns 骨架元素。
- */
-export function Skeleton(props: SkeletonProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Skeleton {...props} />
-}
-
-/** {@link Spin} 的 props。 */
-export type SpinProps = React.ComponentPropsWithoutRef<typeof Arco.Spin>
-
-/**
- * 加载指示器。
- *
- * @param props - 见 {@link SpinProps}。
- * @returns 加载元素。
- */
-export function Spin(props: SpinProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Spin {...props} />
-}
+/**
+ * 排版、空状态与加载占位。
+ *
+ * @module @dsh-plugin/dsh-ui-components/display/feedback
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectDisplayStyles } from './styles.js'
+
+/** {@link Typography} 的 props。 */
+export type TypographyProps = React.ComponentPropsWithoutRef<typeof Arco.Typography>
+
+/**
+ * 富文本排版容器，提供标题、段落、代码与引用样式。
+ *
+ * @param props - 见 {@link TypographyProps}。
+ * @returns 排版元素。
+ */
+export function Typography(props: TypographyProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Typography {...props} />
+}
+
+/** {@link Text} 的 props。 */
+export type TextProps = React.ComponentPropsWithoutRef<typeof Arco.Typography.Text>
+
+/**
+ * 行内文本，可标记为次要、成功、警告或危险。
+ *
+ * @param props - 见 {@link TextProps}。
+ * @returns 文本元素。
+ */
+export function Text(props: TextProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Typography.Text {...props} />
+}
+
+/** {@link Paragraph} 的 props。 */
+export type ParagraphProps = React.ComponentPropsWithoutRef<typeof Arco.Typography.Paragraph>
+
+/**
+ * 段落。
+ *
+ * @param props - 见 {@link ParagraphProps}。
+ * @returns 段落元素。
+ */
+export function Paragraph(props: ParagraphProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Typography.Paragraph {...props} />
+}
+
+/** {@link Empty} 的 props。 */
+export type EmptyProps = React.ComponentPropsWithoutRef<typeof Arco.Empty>
+
+/**
+ * 空状态占位。
+ *
+ * @param props - 见 {@link EmptyProps}。
+ * @returns 空状态元素。
+ */
+export function Empty(props: EmptyProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Empty {...props} />
+}
+
+/** {@link Skeleton} 的 props。 */
+export type SkeletonProps = React.ComponentPropsWithoutRef<typeof Arco.Skeleton>
+
+/**
+ * 骨架屏占位。
+ *
+ * @param props - 见 {@link SkeletonProps}。
+ * @returns 骨架元素。
+ */
+export function Skeleton(props: SkeletonProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Skeleton {...props} />
+}
+
+/** {@link Spin} 的 props。 */
+export type SpinProps = React.ComponentPropsWithoutRef<typeof Arco.Spin>
+
+/**
+ * 加载指示器。
+ *
+ * @param props - 见 {@link SpinProps}。
+ * @returns 加载元素。
+ */
+export function Spin(props: SpinProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Spin {...props} />
+}

package/src/display/index.ts

@@ -1,44 +1,44 @@
-/**
- * 展示组件出口。
- *
- * @module @dsh-plugin/dsh-ui-components/display
- */
-export { Card, Descriptions, Divider, type CardProps, type DescriptionsProps, type DividerProps } from './container.js'
-export {
-  Avatar,
-  Badge,
-  Pill,
-  Tag,
-  type AvatarProps,
-  type BadgeProps,
-  type PillProps,
-  type TagProps,
-  type TagTone,
-} from './label.js'
-export {
-  Empty,
-  Paragraph,
-  Skeleton,
-  Spin,
-  Text,
-  Typography,
-  type EmptyProps,
-  type ParagraphProps,
-  type SkeletonProps,
-  type SpinProps,
-  type TextProps,
-  type TypographyProps,
-} from './feedback.js'
-export {
-  Collapse,
-  CollapseItem,
-  HoverCard,
-  Popover,
-  Tooltip,
-  type CollapseItemProps,
-  type CollapseProps,
-  type HoverCardProps,
-  type PopoverProps,
-  type TooltipProps,
-} from './overlay.js'
-export { DISPLAY_CSS, injectDisplayStyles } from './styles.js'
+/**
+ * 展示组件出口。
+ *
+ * @module @dsh-plugin/dsh-ui-components/display
+ */
+export { Card, Descriptions, Divider, type CardProps, type DescriptionsProps, type DividerProps } from './container.js'
+export {
+  Avatar,
+  Badge,
+  Pill,
+  Tag,
+  type AvatarProps,
+  type BadgeProps,
+  type PillProps,
+  type TagProps,
+  type TagTone,
+} from './label.js'
+export {
+  Empty,
+  Paragraph,
+  Skeleton,
+  Spin,
+  Text,
+  Typography,
+  type EmptyProps,
+  type ParagraphProps,
+  type SkeletonProps,
+  type SpinProps,
+  type TextProps,
+  type TypographyProps,
+} from './feedback.js'
+export {
+  Collapse,
+  CollapseItem,
+  HoverCard,
+  Popover,
+  Tooltip,
+  type CollapseItemProps,
+  type CollapseProps,
+  type HoverCardProps,
+  type PopoverProps,
+  type TooltipProps,
+} from './overlay.js'
+export { DISPLAY_CSS, injectDisplayStyles } from './styles.js'