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

package/src/display/label.tsx

@@ -1,165 +1,165 @@
-/**
- * 徽标类小组件：标签、可选中胶囊、头像、徽标数。
- *
- * `Tag` 与 `Pill` 的区别与宿主一致：`Tag` 是只读徽章（固定 11px 胶囊），
- * `Pill` 是可选中胶囊（24px 高、带激活态），用于视图切换与筛选。
- *
- * @module @dsh-plugin/dsh-ui-components/display/label
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { cx } from '../foundation/style.js'
-import { injectDisplayStyles } from './styles.js'
-
-/** 标签的色调。 */
-export type TagTone =
-  | 'neutral'
-  | 'outline'
-  | 'solid'
-  | 'quiet'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'danger'
-
-/** {@link Tag} 的 props。 */
-export interface TagProps {
-  /** 语义色调，默认 `neutral`。 */
-  tone?: TagTone
-  /** 尺寸，默认 `md`。 */
-  size?: 'sm' | 'md' | 'lg'
-  /** 可关闭时显示关闭按钮。 */
-  closable?: boolean
-  /** 关闭时回调。 */
-  onClose?: () => void
-  /** 追加类名。 */
-  className?: string
-  /** 内联样式。 */
-  style?: React.CSSProperties
-  /** 内容。 */
-  children?: React.ReactNode
-}
-
-/** DSH 色调到内联样式：状态色调自带填充与文字色，其余交给 Arco 变量。 */
-const TONE_STYLE: Record<TagTone, React.CSSProperties | undefined> = {
-  neutral: undefined,
-  outline: {
-    border: '0.5px solid var(--dsw-alias-border-l4)',
-    backgroundColor: 'transparent',
-    color: 'var(--dsw-alias-label-tertiary)',
-  },
-  solid: {
-    backgroundColor: 'var(--dsw-alias-label-primary)',
-    color: 'var(--dsw-alias-bg-layer-3)',
-  },
-  quiet: {
-    backgroundColor: 'transparent',
-    color: 'var(--dsw-alias-label-tertiary)',
-  },
-  success: {
-    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent)',
-    color: 'var(--dsw-alias-state-success-primary)',
-  },
-  info: {
-    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent)',
-    color: 'var(--dsw-alias-state-business-primary)',
-  },
-  warning: {
-    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent)',
-    color: 'var(--dsw-alias-state-warn-primary)',
-  },
-  danger: {
-    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent)',
-    color: 'var(--dsw-alias-state-error-primary)',
-  },
-}
-
-/** DSH 尺寸到 Arco 尺寸的映射。 */
-const ARCO_SIZE: Record<'sm' | 'md' | 'lg', 'small' | 'default' | 'large'> = {
-  sm: 'small',
-  md: 'default',
-  lg: 'large',
-}
-
-/**
- * 只读标签。
- *
- * @param props - 见 {@link TagProps}。
- * @returns 标签元素。
- */
-export function Tag({ tone = 'neutral', size = 'md', closable, onClose, className, style, children }: TagProps): React.ReactElement {
-  injectDisplayStyles()
-  return (
-    <Arco.Tag
-      size={ARCO_SIZE[size]}
-      closable={closable}
-      onClose={onClose}
-      className={className}
-      style={{ ...TONE_STYLE[tone], ...style }}
-    >
-      {children}
-    </Arco.Tag>
-  )
-}
-
-/** {@link Pill} 的 props。 */
-export interface PillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** 选中态。 */
-  active?: boolean
-  /** 带前置图标。 */
-  icon?: React.ReactNode
-}
-
-/**
- * 可选中胶囊，用于视图切换与筛选。
- *
- * @param props - 见 {@link PillProps}。
- * @param ref - 指向原生 `button` 元素。
- * @returns 胶囊按钮元素。
- */
-export const Pill = React.forwardRef<HTMLButtonElement, PillProps>(function Pill(
-  { active, icon, className, children, type, ...rest },
-  ref,
-) {
-  injectDisplayStyles()
-  return (
-    <button
-      {...rest}
-      ref={ref}
-      type={type ?? 'button'}
-      aria-pressed={active === true}
-      className={cx('dsh-pill', 'dsh-pill--interactive', active === true && 'dsh-pill--active', className)}
-    >
-      {icon}
-      {children}
-    </button>
-  )
-})
-
-/** {@link Avatar} 的 props。 */
-export type AvatarProps = React.ComponentPropsWithoutRef<typeof Arco.Avatar>
-
-/**
- * 头像。
- *
- * @param props - 见 {@link AvatarProps}。
- * @returns 头像元素。
- */
-export function Avatar(props: AvatarProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Avatar {...props} />
-}
-
-/** {@link Badge} 的 props。 */
-export type BadgeProps = React.ComponentPropsWithoutRef<typeof Arco.Badge>
-
-/**
- * 徽标数或小红点。
- *
- * @param props - 见 {@link BadgeProps}。
- * @returns 徽标元素。
- */
-export function Badge(props: BadgeProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Badge {...props} />
-}
+/**
+ * 徽标类小组件：标签、可选中胶囊、头像、徽标数。
+ *
+ * `Tag` 与 `Pill` 的区别与宿主一致：`Tag` 是只读徽章（固定 11px 胶囊），
+ * `Pill` 是可选中胶囊（24px 高、带激活态），用于视图切换与筛选。
+ *
+ * @module @dsh-plugin/dsh-ui-components/display/label
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { cx } from '../foundation/style.js'
+import { injectDisplayStyles } from './styles.js'
+
+/** 标签的色调。 */
+export type TagTone =
+  | 'neutral'
+  | 'outline'
+  | 'solid'
+  | 'quiet'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+
+/** {@link Tag} 的 props。 */
+export interface TagProps {
+  /** 语义色调，默认 `neutral`。 */
+  tone?: TagTone
+  /** 尺寸，默认 `md`。 */
+  size?: 'sm' | 'md' | 'lg'
+  /** 可关闭时显示关闭按钮。 */
+  closable?: boolean
+  /** 关闭时回调。 */
+  onClose?: () => void
+  /** 追加类名。 */
+  className?: string
+  /** 内联样式。 */
+  style?: React.CSSProperties
+  /** 内容。 */
+  children?: React.ReactNode
+}
+
+/** DSH 色调到内联样式：状态色调自带填充与文字色，其余交给 Arco 变量。 */
+const TONE_STYLE: Record<TagTone, React.CSSProperties | undefined> = {
+  neutral: undefined,
+  outline: {
+    border: '0.5px solid var(--dsw-alias-border-l4)',
+    backgroundColor: 'transparent',
+    color: 'var(--dsw-alias-label-tertiary)',
+  },
+  solid: {
+    backgroundColor: 'var(--dsw-alias-label-primary)',
+    color: 'var(--dsw-alias-bg-layer-3)',
+  },
+  quiet: {
+    backgroundColor: 'transparent',
+    color: 'var(--dsw-alias-label-tertiary)',
+  },
+  success: {
+    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-success-primary) 10%, transparent)',
+    color: 'var(--dsw-alias-state-success-primary)',
+  },
+  info: {
+    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-business-primary) 10%, transparent)',
+    color: 'var(--dsw-alias-state-business-primary)',
+  },
+  warning: {
+    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent)',
+    color: 'var(--dsw-alias-state-warn-primary)',
+  },
+  danger: {
+    backgroundColor: 'color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent)',
+    color: 'var(--dsw-alias-state-error-primary)',
+  },
+}
+
+/** DSH 尺寸到 Arco 尺寸的映射。 */
+const ARCO_SIZE: Record<'sm' | 'md' | 'lg', 'small' | 'default' | 'large'> = {
+  sm: 'small',
+  md: 'default',
+  lg: 'large',
+}
+
+/**
+ * 只读标签。
+ *
+ * @param props - 见 {@link TagProps}。
+ * @returns 标签元素。
+ */
+export function Tag({ tone = 'neutral', size = 'md', closable, onClose, className, style, children }: TagProps): React.ReactElement {
+  injectDisplayStyles()
+  return (
+    <Arco.Tag
+      size={ARCO_SIZE[size]}
+      closable={closable}
+      onClose={onClose}
+      className={className}
+      style={{ ...TONE_STYLE[tone], ...style }}
+    >
+      {children}
+    </Arco.Tag>
+  )
+}
+
+/** {@link Pill} 的 props。 */
+export interface PillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** 选中态。 */
+  active?: boolean
+  /** 带前置图标。 */
+  icon?: React.ReactNode
+}
+
+/**
+ * 可选中胶囊，用于视图切换与筛选。
+ *
+ * @param props - 见 {@link PillProps}。
+ * @param ref - 指向原生 `button` 元素。
+ * @returns 胶囊按钮元素。
+ */
+export const Pill = React.forwardRef<HTMLButtonElement, PillProps>(function Pill(
+  { active, icon, className, children, type, ...rest },
+  ref,
+) {
+  injectDisplayStyles()
+  return (
+    <button
+      {...rest}
+      ref={ref}
+      type={type ?? 'button'}
+      aria-pressed={active === true}
+      className={cx('dsh-pill', 'dsh-pill--interactive', active === true && 'dsh-pill--active', className)}
+    >
+      {icon}
+      {children}
+    </button>
+  )
+})
+
+/** {@link Avatar} 的 props。 */
+export type AvatarProps = React.ComponentPropsWithoutRef<typeof Arco.Avatar>
+
+/**
+ * 头像。
+ *
+ * @param props - 见 {@link AvatarProps}。
+ * @returns 头像元素。
+ */
+export function Avatar(props: AvatarProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Avatar {...props} />
+}
+
+/** {@link Badge} 的 props。 */
+export type BadgeProps = React.ComponentPropsWithoutRef<typeof Arco.Badge>
+
+/**
+ * 徽标数或小红点。
+ *
+ * @param props - 见 {@link BadgeProps}。
+ * @returns 徽标元素。
+ */
+export function Badge(props: BadgeProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Badge {...props} />
+}

package/src/display/overlay.tsx

@@ -1,103 +1,103 @@
-/**
- * 浮层类展示组件：提示、气泡与折叠面板。
- *
- * 浮层通过 `DshProvider` 的 `getPopupContainer` 进入带皮肤变量的容器，因此
- * 即使在 `body` 层也能拿到同一套令牌。未挂 provider 时会退回 `body`，样式
- * 仍可用，只是拿不到 `.dsh-ui` 上的变量覆盖。
- *
- * @module @dsh-plugin/dsh-ui-components/display/overlay
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { injectDisplayStyles } from './styles.js'
-
-/** {@link Tooltip} 的 props。 */
-export type TooltipProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Tooltip>, 'position'> & {
-  /** 相对锚点的方位，默认 `bottom`。 */
-  position?: React.ComponentPropsWithoutRef<typeof Arco.Tooltip>['position']
-}
-
-/**
- * 悬停或聚焦时显示的短提示，内容应只有一行文字。
- *
- * 宿主的气泡贴着锚点、没有箭头，默认出现在下方；Arco 的默认值是上方，且四向
- * 各留 12px 并预留箭头空间，间距因此明显偏大。箭头与间距都在样式表里收掉。
- *
- * @param props - 见 {@link TooltipProps}。
- * @returns 提示元素。
- */
-export function Tooltip({ position = 'bottom', ...rest }: TooltipProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Tooltip {...rest} position={position} />
-}
-
-/** {@link Popover} 的 props。 */
-export type PopoverProps = React.ComponentPropsWithoutRef<typeof Arco.Popover>
-
-/**
- * 可承载富内容的气泡卡片。
- *
- * @param props - 见 {@link PopoverProps}。
- * @returns 气泡元素。
- */
-export function Popover(props: PopoverProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Popover {...props} />
-}
-
-/** {@link HoverCard} 的 props。 */
-export type HoverCardProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Popover>, 'trigger'> & {
-  /**
-   * 悬停多久后显示，单位毫秒，默认 120。触屏设备上悬停不可用，因此调用方应
-   * 保证同样的信息也能通过点击路径获得。
-   */
-  delayMs?: number
-}
-
-/**
- * 悬停预览卡片，用于在列表里展开一段只读详情。
- *
- * 与 `Popover` 的差别只在触发方式：这里固定为悬停加键盘聚焦，并且带一个很短
- * 的延迟，避免指针划过整列时连续弹层。
- *
- * @param props - 见 {@link HoverCardProps}。
- * @returns 悬停卡片元素。
- */
-export function HoverCard({ delayMs = 120, triggerProps, ...rest }: HoverCardProps): React.ReactElement {
-  injectDisplayStyles()
-  return (
-    <Arco.Popover
-      {...rest}
-      trigger="hover"
-      triggerProps={{ ...triggerProps, mouseEnterDelay: delayMs, mouseLeaveDelay: 80 }}
-    />
-  )
-}
-
-/** {@link Collapse} 的 props。 */
-export type CollapseProps = React.ComponentPropsWithoutRef<typeof Arco.Collapse>
-
-/**
- * 折叠面板组。
- *
- * @param props - 见 {@link CollapseProps}。
- * @returns 折叠面板组元素。
- */
-export function Collapse(props: CollapseProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Collapse {...props} />
-}
-
-/** {@link CollapseItem} 的 props。 */
-export type CollapseItemProps = React.ComponentPropsWithoutRef<typeof Arco.Collapse.Item>
-
-/**
- * 折叠面板中的一项。
- *
- * @param props - 见 {@link CollapseItemProps}。
- * @returns 折叠面板项元素。
- */
-export function CollapseItem(props: CollapseItemProps): React.ReactElement {
-  injectDisplayStyles()
-  return <Arco.Collapse.Item {...props} />
-}
+/**
+ * 浮层类展示组件：提示、气泡与折叠面板。
+ *
+ * 浮层通过 `DshProvider` 的 `getPopupContainer` 进入带皮肤变量的容器，因此
+ * 即使在 `body` 层也能拿到同一套令牌。未挂 provider 时会退回 `body`，样式
+ * 仍可用，只是拿不到 `.dsh-ui` 上的变量覆盖。
+ *
+ * @module @dsh-plugin/dsh-ui-components/display/overlay
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectDisplayStyles } from './styles.js'
+
+/** {@link Tooltip} 的 props。 */
+export type TooltipProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Tooltip>, 'position'> & {
+  /** 相对锚点的方位，默认 `bottom`。 */
+  position?: React.ComponentPropsWithoutRef<typeof Arco.Tooltip>['position']
+}
+
+/**
+ * 悬停或聚焦时显示的短提示，内容应只有一行文字。
+ *
+ * 宿主的气泡贴着锚点、没有箭头，默认出现在下方；Arco 的默认值是上方，且四向
+ * 各留 12px 并预留箭头空间，间距因此明显偏大。箭头与间距都在样式表里收掉。
+ *
+ * @param props - 见 {@link TooltipProps}。
+ * @returns 提示元素。
+ */
+export function Tooltip({ position = 'bottom', ...rest }: TooltipProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Tooltip {...rest} position={position} />
+}
+
+/** {@link Popover} 的 props。 */
+export type PopoverProps = React.ComponentPropsWithoutRef<typeof Arco.Popover>
+
+/**
+ * 可承载富内容的气泡卡片。
+ *
+ * @param props - 见 {@link PopoverProps}。
+ * @returns 气泡元素。
+ */
+export function Popover(props: PopoverProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Popover {...props} />
+}
+
+/** {@link HoverCard} 的 props。 */
+export type HoverCardProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Popover>, 'trigger'> & {
+  /**
+   * 悬停多久后显示，单位毫秒，默认 120。触屏设备上悬停不可用，因此调用方应
+   * 保证同样的信息也能通过点击路径获得。
+   */
+  delayMs?: number
+}
+
+/**
+ * 悬停预览卡片，用于在列表里展开一段只读详情。
+ *
+ * 与 `Popover` 的差别只在触发方式：这里固定为悬停加键盘聚焦，并且带一个很短
+ * 的延迟，避免指针划过整列时连续弹层。
+ *
+ * @param props - 见 {@link HoverCardProps}。
+ * @returns 悬停卡片元素。
+ */
+export function HoverCard({ delayMs = 120, triggerProps, ...rest }: HoverCardProps): React.ReactElement {
+  injectDisplayStyles()
+  return (
+    <Arco.Popover
+      {...rest}
+      trigger="hover"
+      triggerProps={{ ...triggerProps, mouseEnterDelay: delayMs, mouseLeaveDelay: 80 }}
+    />
+  )
+}
+
+/** {@link Collapse} 的 props。 */
+export type CollapseProps = React.ComponentPropsWithoutRef<typeof Arco.Collapse>
+
+/**
+ * 折叠面板组。
+ *
+ * @param props - 见 {@link CollapseProps}。
+ * @returns 折叠面板组元素。
+ */
+export function Collapse(props: CollapseProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Collapse {...props} />
+}
+
+/** {@link CollapseItem} 的 props。 */
+export type CollapseItemProps = React.ComponentPropsWithoutRef<typeof Arco.Collapse.Item>
+
+/**
+ * 折叠面板中的一项。
+ *
+ * @param props - 见 {@link CollapseItemProps}。
+ * @returns 折叠面板项元素。
+ */
+export function CollapseItem(props: CollapseItemProps): React.ReactElement {
+  injectDisplayStyles()
+  return <Arco.Collapse.Item {...props} />
+}