@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/feedback/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Progress.tsx"],"sourcesContent":["/**\n * 进度（role=\"progressbar\"）：条形（默认）或环形。有 value 时显示完成比例；没有 value（null / undefined）时是不确定进度，循环动画。\n * 名称写 label（条形显示在上方、环形显示在下方）或 aria-label / aria-labelledby（读屏要知道是什么的进度）。\n * 条形有 label 时右侧默认显示数值，环形中间显示数值（按语言格式化的百分比，valueLabel 可以换成自己的文字），参考 React Spectrum ProgressBar。\n * target 是目标值：条上画一条竖线、环上画一道刻度，读屏念成“60%，目标 80%”。\n *\n *   <Progress value={uploaded} max={total} label=\"上传\" valueLabel={`${uploaded} / ${total}`} />\n *   <Progress value={60} aria-label=\"上传进度\" />  只有进度条\n *   <Progress aria-label=\"正在加载\" />               不确定进度\n *   <Progress shape=\"circle\" value={72} target={80} label=\"本月销售完成率\" />\n *\n * 部件：有标签行时外层是 Root（propsRoot），里面是 Label、ValueLabel 与进度条；没有时进度条就是根元素。\n * 环形：根元素是 progressbar，里面是 SVG（轨道、进度、目标刻度）与中间的 ValueLabel；有 label 时外层是 Root，标签在下方。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { useId, type VNodeChild } from 'vue';\nimport { Text, type TextProps } from '../base/Text';\nimport { useLang } from '../config/context';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { useFormat } from '../config/lang/format';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { clamp } from '../utils/data/number';\nimport { compareNumeric, toNumber, type NumericValue } from '../utils/data/numeric';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { fontSizeStyles, relativeFontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { radiusStyles, type Radius } from '../utils/style/styles';\nimport { t } from '../config/theme/tokens';\n\n/** 角色与取值由组件管理 */\nexport type ProgressManaged =\n  'role' | 'aria-valuemin' | 'aria-valuemax' | 'aria-valuenow' | 'aria-valuetext';\n\n/** 进度的形状 */\nexport interface ProgressShapes {\n  /** 条形（默认）：占满一行 */\n  bar: unknown;\n  /** 环形：中间显示数值，适合仪表盘、卡片里的完成率；直径随字号缩放 */\n  circle: unknown;\n}\n\n/** Progress 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ProgressOptions {\n  /** 色调（与 Badge、Alert 等同一套），默认 accent */\n  tone?: StatusTone;\n  /** 字号档位：进度条的粗细随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n  /** 圆角，默认 full */\n  radius?: Radius;\n}\n\n/** 未声明的属性落到轨道（role=\"progressbar\" 的主元素）上 */\nexport interface ProgressProps extends PartProps<'div', ProgressManaged>, ProgressOptions {\n  /** 当前值：number、bigint 或 Decimal；不写（或 null）时为不确定进度 */\n  value?: NumericValue | null;\n  /** 最大值，默认 100 */\n  max?: NumericValue;\n  /** 形状，默认 bar */\n  shape?: keyof ProgressShapes;\n  /** 目标值（与 value 同一单位）：条上画竖线、环上画刻度，读屏念在进度后面 */\n  target?: NumericValue;\n  /** 读屏念的取值文字，如 `(value, max) => \\`已上传 ${value} / ${max} 个文件\\``；默认是百分比 */\n  valueText?: (value: NumericValue, max: NumericValue) => string;\n  /** 进度条上方的标签：同时是进度条的名称（aria-labelledby），不用再写 aria-label */\n  label?: VNodeChild;\n  /** 在标签行右侧显示数值；有 label 或 valueLabel 时默认显示，不确定进度时不显示 */\n  showValueLabel?: boolean;\n  /** 数值文字，替换默认的百分比：`'38.6 / 50 GB'`（只是显示，读屏念的是 valueText） */\n  valueLabel?: VNodeChild;\n  /** 条形的进度（着色部分）的部件属性 */\n  propsIndicator?: PartProps<'div'>;\n  /** 外层（标签行与进度条）的部件属性；只在有标签行时渲染 */\n  propsRoot?: PartProps<'div'>;\n  /** 标签行（标签与数值文字）的部件属性 */\n  propsHeader?: PartProps<'div'>;\n  /** 标签的部件属性 */\n  propsLabel?: Partial<TextProps>;\n  /** 数值文字的部件属性 */\n  propsValueLabel?: Partial<TextProps>;\n}\n\nconst slide = css.keyframes({\n  from: { transform: 'translateX(-100%)' },\n  to: { transform: 'translateX(250%)' },\n});\n\n// 从右到左排版：色块在起始边（右边），从右往左扫\nconst slideRtl = css.keyframes({\n  from: { transform: 'translateX(100%)' },\n  to: { transform: 'translateX(-250%)' },\n});\n\nconst spin = css.keyframes({ to: { rotate: '1turn' } });\n\n/**\n * 进度的配方。条形的部件：root（有标签行时的外层）、header（标签行）、label、valueLabel、\n * track（轨道，即 progressbar）、indicator（进度）、target（目标线）；环形的部件：root（有标签时的外层）、\n * circle（progressbar）、circleSvg、circleTrack、circleIndicator、circleTarget、valueLabel（中间的数值）、label。\n * 档位：shape、tone、indeterminate（不确定进度）。字号、圆角用共用的表另外叠加；\n * 条形的进度宽度与目标线的位置是任意值，用下面的动态样式\n */\nexport const progressRecipe = css.recipe({\n  name: 'Progress',\n  parts: [\n    'root',\n    'header',\n    'label',\n    'valueLabel',\n    'track',\n    'indicator',\n    'target',\n    'circle',\n    'circleSvg',\n    'circleTrack',\n    'circleIndicator',\n    'circleTarget',\n  ],\n  base: {\n    header: {\n      display: 'flex',\n      alignItems: 'baseline',\n      justifyContent: 'space-between',\n      gap: '_sm',\n    },\n    track: {\n      position: 'relative',\n      overflow: 'hidden',\n      width: '_full',\n      height: `calc(${t.space.xs} * 1.5)`,\n      backgroundColor: '_fill',\n      // Windows 高对比下系统把背景色改掉：轨道画一圈系统的文字色，进度用系统的高亮色（见档位 tone）\n      outlineStyle: { default: null, _forcedColors: 'solid' },\n      outlineWidth: { default: null, _forcedColors: '_borderWidths.xs' },\n      outlineColor: { default: null, _forcedColors: 'CanvasText' },\n    },\n    indicator: {\n      height: '_full',\n      borderRadius: 'inherit',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `width ${t.durations.md} ${t.easings.standard}`,\n    },\n    // 竖线压在轨道上：正文色，与进度、轨道都有对比；位置按书写方向\n    target: {\n      position: 'absolute',\n      insetBlock: 0,\n      width: '_borderWidths.sm',\n      marginInlineStart: `calc(-0.5 * ${t.borderWidths.sm})`,\n      backgroundColor: { default: '_text', _forcedColors: 'CanvasText' },\n    },\n    // 直径随字号缩放：5em 在默认字号下约 70px\n    circle: {\n      position: 'relative',\n      display: 'inline-grid',\n      placeItems: 'center',\n      width: '5em',\n      height: '5em',\n      flexShrink: 0,\n    },\n    circleSvg: { position: 'absolute', inset: 0, width: '100%', height: '100%', rotate: '-90deg' },\n    circleTrack: {\n      fill: 'none',\n      stroke: { default: '_fill', _forcedColors: 'CanvasText' },\n    },\n    circleIndicator: {\n      fill: 'none',\n      forcedColorAdjust: { default: null, _forcedColors: 'none' },\n      transition: `stroke-dashoffset ${t.durations.md} ${t.easings.standard}`,\n    },\n    circleTarget: { stroke: '_text', strokeLinecap: 'round' },\n  },\n  variants: {\n    shape: {\n      bar: {\n        // 有标签行时的外层：标签行在上、进度条在下\n        root: { display: 'grid', gap: '_xs', minWidth: 0 },\n        // 数值宽度不跳：等宽数字，不被标签挤压\n        valueLabel: { flexShrink: 0, fontVariantNumeric: 'tabular-nums' },\n      },\n      circle: {\n        // 有标签时：环在上、标签在下，居中\n        root: { display: 'inline-grid', justifyItems: 'center', gap: '_xs', textAlign: 'center' },\n        // 中间的数值：比上下文字号小一档，等宽数字\n        valueLabel: { fontVariantNumeric: 'tabular-nums', fontWeight: '_semibold', lineHeight: 1 },\n      },\n    },\n    // 和轨道（fill）之间要有 3:1：中性色用次要文字色，accent 以外的状态色用各自的文字色；条形用背景色，环形用 stroke\n    tone: {\n      neutral: {\n        indicator: {\n          backgroundColor: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_textMuted', _forcedColors: 'Highlight' },\n        },\n      },\n      accent: {\n        indicator: {\n          backgroundColor: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_accent', _forcedColors: 'Highlight' },\n        },\n      },\n      info: {\n        indicator: {\n          backgroundColor: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n        circleIndicator: {\n          stroke: { default: '_infoText', _forcedColors: 'Highlight' },\n        },\n      },\n      success: {\n        indicator: {\n          backgroundColor: {\n            default: '_successText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_successText', _forcedColors: 'Highlight' },\n        },\n      },\n      warning: {\n        indicator: {\n          backgroundColor: {\n            default: '_warningText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_warningText', _forcedColors: 'Highlight' },\n        },\n      },\n      danger: {\n        indicator: {\n          backgroundColor: {\n            default: '_dangerText',\n            _forcedColors: 'Highlight',\n          },\n        },\n        circleIndicator: {\n          stroke: { default: '_dangerText', _forcedColors: 'Highlight' },\n        },\n      },\n    },\n    indeterminate: {\n      true: {\n        // 条形：一段 40% 宽的色块从起始边到结束边循环；它本身就是信息，不随 durations 变为 0，减少动态效果时变慢\n        indicator: {\n          width: '40%',\n          animationName: { default: slide, ':dir(rtl)': slideRtl },\n          animationDuration: { default: '1.4s', _reducedMotion: '3s' },\n          animationTimingFunction: '_easings.standard',\n          animationIterationCount: 'infinite',\n        },\n        // 环形：四分之一圈的弧一直转；减少动态效果时变慢\n        circleIndicator: {\n          transformOrigin: 'center',\n          animationName: spin,\n          animationDuration: { default: '1s', _reducedMotion: '3s' },\n          animationTimingFunction: 'linear',\n          animationIterationCount: 'infinite',\n        },\n      },\n    },\n  },\n});\n\n/** 进度的部件（createUi / Provider 的 styles.Progress 按它定制） */\nexport type ProgressPart = (typeof progressRecipe.parts)[number];\n\n/** 条形进度目标线的位置 */\nexport const progressTargetPositionStyles = css.create({\n  at: (percent: string) => ({ insetInlineStart: percent }),\n});\n\n// 宽度是任意值，用动态样式；单独一个 create，见 COMPONENTS.md §4\n/** Progress 的样式：percent */\nexport const progressWidthStyles = css.create({\n  percent: (percent: string) => ({ width: percent }),\n});\n\n/** 环形的几何：viewBox 100 × 100，线宽 10 */\nconst RING = { stroke: 10, radius: 45, circumference: 2 * Math.PI * 45 };\n\n/** 值在 0–max 的比例（0–100）；超出范围的夹到两端 */\nfunction percentOf(value: NumericValue, max: NumericValue): number {\n  const total = toNumber(max);\n  if (total <= 0) return 0;\n  const clamped = compareNumeric(value, 0) < 0 ? 0 : compareNumeric(value, max) > 0 ? max : value;\n  return clamp((toNumber(clamped) / total) * 100, 0, 100);\n}\n\n/** 进度：有 value 时为完成比例，没有时为不确定进度；条形有 label 时上方是标签与数值，环形中间是数值 */\nexport const Progress = _component(\n  ({\n    value,\n    max = 100,\n    shape = 'bar',\n    target,\n    tone,\n    size,\n    radius,\n    valueText,\n    label,\n    showValueLabel,\n    valueLabel,\n    propsIndicator,\n    propsRoot,\n    propsHeader,\n    propsLabel,\n    propsValueLabel,\n    ...rest\n  }: ProgressProps) => {\n    const labelId = `${useId()}-label`;\n    const format = useFormat();\n    const lang = useLang();\n    const appearance = useDefaults('Progress', () => ({ tone, size, radius }), {\n      tone: 'accent',\n      radius: 'full',\n    });\n    const recipe = useRecipe(progressRecipe);\n    const percentText = (percent: number) =>\n      format.number(percent / 100, { style: 'percent', maximumFractionDigits: 0 });\n\n    return () => {\n      const look = appearance();\n      const determinate = value != null;\n      const s = recipe({ shape, tone: look.tone, indeterminate: !determinate });\n      // 夹在 0–max 之间、按原值比较；比例与读屏的 aria-valuenow 用浮点数就够\n      const clamped: NumericValue = !determinate\n        ? 0\n        : compareNumeric(value, 0) < 0\n          ? 0\n          : compareNumeric(value, max) > 0\n            ? max\n            : value;\n      const percent = percentOf(clamped, max);\n      const targetPercent = target == null ? undefined : percentOf(target, max);\n      const shownValue = valueLabel ?? percentText(percent);\n      const spoken = determinate ? (valueText?.(clamped, max) ?? percentText(percent)) : undefined;\n      const circle = shape === 'circle';\n      const header =\n        !circle && (label != null || (determinate && (showValueLabel ?? valueLabel != null)));\n      const wrapped = header || (circle && hasContent(label));\n\n      const progressbar = {\n        role: 'progressbar',\n        'aria-valuemin': 0,\n        'aria-valuemax': toNumber(max),\n        'aria-valuenow': determinate ? toNumber(clamped) : undefined,\n        'aria-valuetext':\n          spoken && targetPercent !== undefined\n            ? `${spoken}，${lang.progressTarget(percentText(targetPercent))}`\n            : spoken,\n      } as const;\n      const state = !determinate\n        ? 'indeterminate'\n        : compareNumeric(clamped, max) >= 0\n          ? 'complete'\n          : 'loading';\n\n      const ring = () => {\n        const { stroke, radius: r, circumference } = RING;\n        // 目标刻度：从轨道外缘到内缘的一道线，按比例转到对应角度（SVG 整体转了 -90°，0 在正上方）\n        const angle = ((targetPercent ?? 0) / 100) * 2 * Math.PI;\n        const tick = (distance: number) => ({\n          x: 50 + distance * Math.cos(angle),\n          y: 50 + distance * Math.sin(angle),\n        });\n        const outer = tick(r + stroke / 2 + 2);\n        const inner = tick(r - stroke / 2 - 2);\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              {\n                ...s.circle,\n                sx: [s.circle.sx, !wrapped && look.size && fontSizeStyles[look.size]],\n                'aria-labelledby': hasContent(label) ? labelId : undefined,\n              },\n              rest,\n              progressbar,\n            )}\n            data-state={state}\n          >\n            <svg viewBox=\"0 0 100 100\" aria-hidden=\"true\" {...mergeAttrs<'svg'>(s.circleSvg)}>\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                {...mergeAttrs<'circle'>(s.circleTrack)}\n              />\n              <circle\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                stroke-width={stroke}\n                stroke-linecap={look.radius === 'none' ? 'butt' : 'round'}\n                stroke-dasharray={circumference}\n                stroke-dashoffset={\n                  determinate ? circumference * (1 - percent / 100) : circumference * 0.75\n                }\n                {...mergeAttrs<'circle'>(s.circleIndicator)}\n              />\n              {targetPercent !== undefined && (\n                <line\n                  x1={outer.x}\n                  y1={outer.y}\n                  x2={inner.x}\n                  y2={inner.y}\n                  stroke-width={2.5}\n                  {...mergeAttrs<'line'>(s.circleTarget)}\n                />\n              )}\n            </svg>\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, sx: [s.valueLabel.sx, relativeFontSizeStyles.sm] },\n                  propsValueLabel,\n                  // 读屏从 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n        );\n      };\n\n      const bar = () => (\n        <div\n          {...mergeAttrs<'div'>(\n            {\n              ...s.track,\n              sx: [\n                s.track.sx,\n                radiusStyles[look.radius],\n                // 有外层时字号档位放在外层，标签行一起缩放\n                !header && look.size && fontSizeStyles[look.size],\n              ],\n              'aria-labelledby': hasContent(label) ? labelId : undefined,\n            },\n            rest,\n            progressbar,\n          )}\n          data-state={state}\n        >\n          <div\n            {...mergeAttrs<'div'>(s.indicator, propsIndicator, {\n              sx: determinate ? progressWidthStyles.percent(`${percent}%`) : undefined,\n            })}\n          />\n          {targetPercent !== undefined && (\n            <div\n              aria-hidden=\"true\"\n              {...mergeAttrs<'div'>({\n                ...s.target,\n                sx: [s.target.sx, progressTargetPositionStyles.at(`${targetPercent}%`)],\n              })}\n            />\n          )}\n        </div>\n      );\n\n      if (circle) {\n        if (!wrapped) return ring();\n        return (\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n              propsRoot,\n            )}\n          >\n            {ring()}\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.label, tone: 'muted', sx: [s.label.sx, relativeFontSizeStyles.sm] },\n                propsLabel,\n                { id: labelId },\n              )}\n            >\n              {label}\n            </Text>\n          </div>\n        );\n      }\n      if (!header) return bar();\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, look.size && fontSizeStyles[look.size]] },\n            propsRoot,\n          )}\n        >\n          <div\n            {...mergeAttrs<'div'>(\n              { ...s.header, sx: [s.header.sx, relativeFontSizeStyles.sm] },\n              propsHeader,\n            )}\n          >\n            {hasContent(label) && (\n              <Text {...mergePartProps<TextProps>(s.label, propsLabel, { id: labelId })}>\n                {label}\n              </Text>\n            )}\n            {determinate && (showValueLabel ?? true) && (\n              <Text\n                {...mergePartProps<TextProps>(\n                  { ...s.valueLabel, tone: 'muted' },\n                  propsValueLabel,\n                  // 读屏从进度条的 aria-valuetext 得知数值，这里不重复念\n                  { 'aria-hidden': true },\n                )}\n              >\n                {shownValue}\n              </Text>\n            )}\n          </div>\n          {bar()}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Result.d.ts

@@ -0,0 +1,69 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type IconData, type IconProps } from '../base/Icon';
+import { type TextProps } from '../base/Text';
+import { type PartProps } from '../utils/props';
+import { type TextSize } from '../utils/style/typography';
+/** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */
+export interface ResultTones {
+    /** 成功（默认）：对勾 */
+    success: unknown;
+    /** 失败：感叹号 */
+    danger: unknown;
+    /** 警告：三角感叹号 */
+    warning: unknown;
+    /** 信息：i */
+    info: unknown;
+}
+/** 常见的出错状态：图标、色调、标题与说明都有默认值（标题与说明取语言包） */
+export interface ResultStatuses {
+    /** 没有权限 */
+    403: unknown;
+    /** 找不到页面 */
+    404: unknown;
+    /** 服务出错 */
+    500: unknown;
+}
+/** Result 的外观选项：可以在 ComponentDefaults 里统一设置 */
+export interface ResultOptions {
+    /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */
+    size?: TextSize;
+}
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+export interface ResultProps extends PartProps<'div', 'title'>, ResultOptions {
+    /** 常见状态（403、404、500）：给出图标、色调、状态码与默认的标题、说明，显式写的优先 */
+    status?: `${keyof ResultStatuses}`;
+    /** 色调，默认 success（写了 status 时按状态） */
+    tone?: keyof ResultTones;
+    /** 图标；不写时按色调选，false 不显示 */
+    icon?: IconData | false;
+    /** 挂载时描线画出图标，默认 true；减少动态效果时直接画好 */
+    draw?: boolean;
+    /** 标题 */
+    title?: VNodeChild;
+    /** 说明 */
+    description?: VNodeChild;
+    /** 操作（如“返回”“重试”按钮） */
+    action?: VNodeChild;
+    /** 图标的部件属性 */
+    propsIcon?: Partial<IconProps>;
+    /** 状态码的部件属性 */
+    propsCode?: Partial<TextProps>;
+    /** 标题的部件属性 */
+    propsTitle?: Partial<TextProps>;
+    /** 说明的部件属性 */
+    propsDescription?: Partial<TextProps>;
+    /** 操作区的部件属性 */
+    propsAction?: PartProps<'div'>;
+    /** 说明之后的内容（如错误详情） */
+    children?: VNodeChild;
+}
+/**
+ * 结果页的配方：各部件的布局与颜色。图标的色调用共用的 toneStyles，排在配方之前，
+ * createUi / Provider 的 styles.Result 能盖过它；字号档位用共用的 fontSizeStyles 另外叠加
+ */
+export declare const resultRecipe: css.Recipe<"action" | "code" | "description" | "icon" | "root" | "title", {}>;
+/** 结果页的部件（createUi / Provider 的 styles.Result 按它定制） */
+export type ResultPart = (typeof resultRecipe.parts)[number];
+/** 结果页：状态图标、标题、说明、操作，居中排列 */
+export declare const Result: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<ResultProps>;

package/dist/feedback/Result.js

@@ -0,0 +1,165 @@
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { hasContent, mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles, relativeFontSizeStyles, toneStyles } from "../utils/style/typography.js";
+import { useRecipe } from "../config/styles.js";
+import { Icon } from "../base/Icon.js";
+import { statusIcons } from "../utils/style/tone-styles.js";
+import { Paragraph, Text as Text$1 } from "../base/Text.js";
+import { createVNode, isVNode, mergeProps, unref } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { FileQuestionMark, ServerCrash, ShieldX } from "@lucide/icons";
+//#region src/feedback/Result.tsx
+/** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */
+/** 常见的出错状态：图标、色调、标题与说明都有默认值（标题与说明取语言包） */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 各状态的图标与色调 */
+var STATUS_LOOKS = {
+	403: {
+		icon: ShieldX,
+		tone: "warning"
+	},
+	404: {
+		icon: FileQuestionMark,
+		tone: "info"
+	},
+	500: {
+		icon: ServerCrash,
+		tone: "danger"
+	}
+};
+/** Result 的外观选项：可以在 ComponentDefaults 里统一设置 */
+/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */
+/**
+* 结果页的配方：各部件的布局与颜色。图标的色调用共用的 toneStyles，排在配方之前，
+* createUi / Provider 的 styles.Result 能盖过它；字号档位用共用的 fontSizeStyles 另外叠加
+*/
+var resultRecipe = css.recipe({
+	name: "Result",
+	parts: [
+		"root",
+		"icon",
+		"code",
+		"title",
+		"description",
+		"action"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: "_sm",
+			paddingBlock: "_xl",
+			paddingInline: "_lg",
+			textAlign: "center",
+			color: "_text"
+		},
+		icon: {
+			width: "4em",
+			height: "4em",
+			marginBlockEnd: "_sm",
+			strokeWidth: "_sm"
+		},
+		code: {
+			fontSize: "2.5em",
+			fontWeight: "_bold",
+			lineHeight: 1,
+			color: "_textMuted",
+			fontVariantNumeric: "tabular-nums",
+			letterSpacing: "_tight"
+		},
+		title: {
+			fontWeight: "_semibold",
+			lineHeight: "_tight"
+		},
+		description: {
+			maxWidth: "36em",
+			color: "_textMuted"
+		},
+		action: {
+			display: "flex",
+			flexWrap: "wrap",
+			justifyContent: "center",
+			gap: "_sm",
+			marginBlockStart: "_md"
+		}
+	}
+});
+/** 结果页的部件（createUi / Provider 的 styles.Result 按它定制） */
+/** 结果页：状态图标、标题、说明、操作，居中排列 */
+var Result = /*#__PURE__*/ _component((_props, _ctx) => {
+	const status = readonlyProp(_props, "status");
+	const tone = readonlyProp(_props, "tone");
+	const icon = readonlyProp(_props, "icon");
+	const draw = readonlyProp(_props, "draw", true);
+	const title = readonlyProp(_props, "title");
+	const description = readonlyProp(_props, "description");
+	const action = readonlyProp(_props, "action");
+	const size = readonlyProp(_props, "size");
+	const propsIcon = readonlyProp(_props, "propsIcon");
+	const propsCode = readonlyProp(_props, "propsCode");
+	const propsTitle = readonlyProp(_props, "propsTitle");
+	const propsDescription = readonlyProp(_props, "propsDescription");
+	const propsAction = readonlyProp(_props, "propsAction");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const lang = useLang();
+	const appearance = useDefaults("Result", () => ({ size: size.value }));
+	const recipe = useRecipe(resultRecipe);
+	return () => {
+		const textSize = appearance().size;
+		const preset = status.value && STATUS_LOOKS[Number(status.value)];
+		const text = status.value && lang.resultStatus[status.value];
+		const shownTone = tone.value ?? preset?.tone ?? "success";
+		const shownTitle = title.value ?? text?.title;
+		const shownDescription = description.value ?? text?.description;
+		const s = recipe({ tone: shownTone });
+		return createVNode("div", mergeProps(mergeAttrs({
+			...s.root,
+			sx: [s.root.sx, textSize && fontSizeStyles[textSize]]
+		}, rest), { "data-tone": shownTone }), [
+			icon.value !== false && createVNode(Icon, mergePartProps({
+				...s.icon,
+				icon: icon.value ?? preset?.icon ?? statusIcons[shownTone],
+				draw: draw.value,
+				sx: [toneStyles[shownTone], s.icon.sx]
+			}, propsIcon.value), null),
+			status.value && createVNode(Text$1, mergeProps(mergePartProps(s.code, propsCode.value, { "aria-hidden": true }), { "key": "__site0" }), {
+				default: () => [unref(status)],
+				$stable: true
+			}),
+			hasContent(shownTitle) && createVNode(Text$1, mergePartProps({
+				...s.title,
+				sx: [s.title.sx, relativeFontSizeStyles.xl]
+			}, propsTitle.value), _isSlot(shownTitle) ? shownTitle : { default: () => [shownTitle] }),
+			hasContent(shownDescription) && createVNode(Paragraph, mergePartProps(s.description, propsDescription.value), _isSlot(shownDescription) ? shownDescription : { default: () => [shownDescription] }),
+			children.value,
+			hasContent(action.value) && createVNode("div", mergeAttrs(s.action, propsAction.value), [action.value])
+		]);
+	};
+}, {
+	name: "Result",
+	props: [
+		"status",
+		"tone",
+		"icon",
+		"draw",
+		"title",
+		"description",
+		"action",
+		"size",
+		"propsIcon",
+		"propsCode",
+		"propsTitle",
+		"propsDescription",
+		"propsAction"
+	]
+});
+//#endregion
+export { Result, resultRecipe };
+
+//# sourceMappingURL=Result.js.map

package/dist/feedback/Result.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Result.js","names":["_isVNode","_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode","_mergeProps","Text","_vue_unref"],"sources":["../../src/feedback/Result.tsx"],"sourcesContent":["/**\n * 结果页：操作完成后的整块反馈（提交成功、支付失败、权限不足）。大图标（挂载时一笔画出）+ 标题 + 说明 + 操作，居中排列。\n *\n *   <Result tone=\"success\" title=\"提交成功\" description=\"审核结果会通过邮件通知你。\" action={<Button>返回列表</Button>} />\n *   <Result tone=\"danger\" title=\"支付失败\" action={<Button onClick={retry}>重试</Button>}>{details}</Result>\n *   <Result status=\"404\" action={<LinkButton href=\"/\">回到首页</LinkButton>} />   常见状态：图标、色调、标题与说明都有默认值\n *\n * 只是展示，不带角色；操作后才出现、需要读屏播报时，由所在区域用 aria-live 或把焦点移到标题上。\n * 部件：Root（div）、Icon、Code（状态码，status 时）、Title（Text）、Description（Paragraph）、Action（div）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { FileQuestionMark, ServerCrash, ShieldX } from '@lucide/icons';\nimport type { VNodeChild } from 'vue';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { useLang } from '../config/context';\nimport { Paragraph, Text, type TextProps } from '../base/Text';\nimport { useDefaults } from '../config/defaults';\nimport { useRecipe } from '../config/styles';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { statusIcons } from '../utils/style/tone-styles';\nimport {\n  fontSizeStyles,\n  relativeFontSizeStyles,\n  toneStyles,\n  type TextSize,\n} from '../utils/style/typography';\n\n/** 结果的色调：决定图标与颜色（与 Alert、Toast 的色调同名） */\nexport interface ResultTones {\n  /** 成功（默认）：对勾 */\n  success: unknown;\n  /** 失败：感叹号 */\n  danger: unknown;\n  /** 警告：三角感叹号 */\n  warning: unknown;\n  /** 信息：i */\n  info: unknown;\n}\n\n/** 常见的出错状态：图标、色调、标题与说明都有默认值（标题与说明取语言包） */\nexport interface ResultStatuses {\n  /** 没有权限 */\n  403: unknown;\n  /** 找不到页面 */\n  404: unknown;\n  /** 服务出错 */\n  500: unknown;\n}\n\n/** 各状态的图标与色调 */\nconst STATUS_LOOKS: Record<keyof ResultStatuses, { icon: IconData; tone: keyof ResultTones }> = {\n  403: { icon: ShieldX, tone: 'warning' },\n  404: { icon: FileQuestionMark, tone: 'info' },\n  500: { icon: ServerCrash, tone: 'danger' },\n};\n\n/** Result 的外观选项：可以在 ComponentDefaults 里统一设置 */\nexport interface ResultOptions {\n  /** 字号档位，内部尺寸随之缩放；不写时继承上下文字号 */\n  size?: TextSize;\n}\n\n/** 未声明的属性落到外层 div 上；原生的 title 属性（悬停提示）让给标题 */\nexport interface ResultProps extends PartProps<'div', 'title'>, ResultOptions {\n  /** 常见状态（403、404、500）：给出图标、色调、状态码与默认的标题、说明，显式写的优先 */\n  status?: `${keyof ResultStatuses}`;\n  /** 色调，默认 success（写了 status 时按状态） */\n  tone?: keyof ResultTones;\n  /** 图标；不写时按色调选，false 不显示 */\n  icon?: IconData | false;\n  /** 挂载时描线画出图标，默认 true；减少动态效果时直接画好 */\n  draw?: boolean;\n  /** 标题 */\n  title?: VNodeChild;\n  /** 说明 */\n  description?: VNodeChild;\n  /** 操作（如“返回”“重试”按钮） */\n  action?: VNodeChild;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 状态码的部件属性 */\n  propsCode?: Partial<TextProps>;\n  /** 标题的部件属性 */\n  propsTitle?: Partial<TextProps>;\n  /** 说明的部件属性 */\n  propsDescription?: Partial<TextProps>;\n  /** 操作区的部件属性 */\n  propsAction?: PartProps<'div'>;\n  /** 说明之后的内容（如错误详情） */\n  children?: VNodeChild;\n}\n\n/**\n * 结果页的配方：各部件的布局与颜色。图标的色调用共用的 toneStyles，排在配方之前，\n * createUi / Provider 的 styles.Result 能盖过它；字号档位用共用的 fontSizeStyles 另外叠加\n */\nexport const resultRecipe = css.recipe({\n  name: 'Result',\n  parts: ['root', 'icon', 'code', 'title', 'description', 'action'],\n  base: {\n    root: {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      gap: '_sm',\n      paddingBlock: '_xl',\n      paddingInline: '_lg',\n      textAlign: 'center',\n      color: '_text',\n    },\n    icon: { width: '4em', height: '4em', marginBlockEnd: '_sm', strokeWidth: '_sm' },\n    // 状态码：大号（随字号缩放）、次要颜色、等宽数字，压在标题上方\n    code: {\n      fontSize: '2.5em',\n      fontWeight: '_bold',\n      lineHeight: 1,\n      color: '_textMuted',\n      fontVariantNumeric: 'tabular-nums',\n      letterSpacing: '_tight',\n    },\n    title: { fontWeight: '_semibold', lineHeight: '_tight' },\n    description: { maxWidth: '36em', color: '_textMuted' },\n    action: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      justifyContent: 'center',\n      gap: '_sm',\n      marginBlockStart: '_md',\n    },\n  },\n});\n\n/** 结果页的部件（createUi / Provider 的 styles.Result 按它定制） */\nexport type ResultPart = (typeof resultRecipe.parts)[number];\n\n/** 结果页：状态图标、标题、说明、操作，居中排列 */\nexport const Result = _component(\n  ({\n    status,\n    tone,\n    icon,\n    draw = true,\n    title,\n    description,\n    action,\n    size,\n    propsIcon,\n    propsCode,\n    propsTitle,\n    propsDescription,\n    propsAction,\n    children,\n    ...rest\n  }: ResultProps) => {\n    const lang = useLang();\n    const appearance = useDefaults('Result', () => ({ size }));\n    const recipe = useRecipe(resultRecipe);\n    return () => {\n      const textSize = appearance().size;\n      const preset = status && STATUS_LOOKS[Number(status) as keyof ResultStatuses];\n      const text = status && lang.resultStatus[status];\n      const shownTone = tone ?? preset?.tone ?? 'success';\n      const shownTitle = title ?? text?.title;\n      const shownDescription = description ?? text?.description;\n      const s = recipe({ tone: shownTone });\n      return (\n        <div\n          {...mergeAttrs<'div'>(\n            { ...s.root, sx: [s.root.sx, textSize && fontSizeStyles[textSize]] },\n            rest,\n          )}\n          data-tone={shownTone}\n        >\n          {icon !== false && (\n            <Icon\n              {...mergePartProps<IconProps>(\n                {\n                  ...s.icon,\n                  icon: icon ?? preset?.icon ?? statusIcons[shownTone],\n                  draw,\n                  sx: [toneStyles[shownTone], s.icon.sx],\n                },\n                propsIcon,\n              )}\n            />\n          )}\n          {status && (\n            <Text\n              {...mergePartProps<TextProps>(\n                s.code,\n                propsCode,\n                // 标题已经说明了状态，状态码对读屏是重复的\n                { 'aria-hidden': true },\n              )}\n            >\n              {status}\n            </Text>\n          )}\n          {hasContent(shownTitle) && (\n            <Text\n              {...mergePartProps<TextProps>(\n                { ...s.title, sx: [s.title.sx, relativeFontSizeStyles.xl] },\n                propsTitle,\n              )}\n            >\n              {shownTitle}\n            </Text>\n          )}\n          {hasContent(shownDescription) && (\n            <Paragraph {...mergePartProps<TextProps>(s.description, propsDescription)}>\n              {shownDescription}\n            </Paragraph>\n          )}\n          {children}\n          {hasContent(action) && <div {...mergeAttrs<'div'>(s.action, propsAction)}>{action}</div>}\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/feedback/Skeleton.d.ts

@@ -0,0 +1,50 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { VNodeChild } from 'vue';
+import { type PartProps } from '../utils/props';
+/** 骨架的常用形状 */
+export interface SkeletonVariants {
+    /** 一行文字：高 1em，占满宽度 */
+    text: unknown;
+    /** 标题：高 1.5em，四成宽度 */
+    heading: unknown;
+    /** 圆：头像，边长 2.5em（与同字号的 Avatar 一样大） */
+    circle: unknown;
+    /** 按钮：控件高度，宽 6em */
+    button: unknown;
+    /** 图片：占满宽度，16:9 */
+    image: unknown;
+}
+/** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */
+export interface SkeletonProps extends PartProps<'span', 'aria-hidden' | 'inert'> {
+    /**
+     * 是否在加载；false 时直接渲染内容
+     * @default true
+     */
+    loading?: boolean;
+    /** 形状；不写时大小由包着的内容或 sx 决定 */
+    variant?: keyof SkeletonVariants;
+    /** 扫光的延迟（毫秒）：几块骨架依次扫过、连成一道波时用（SkeletonText 的各行就是这样错开的） */
+    delay?: number;
+    /** 包着内容的那一层（不可见、只用来撑出大小）的部件属性 */
+    propsContent?: PartProps<'span'>;
+    children?: VNodeChild;
+}
+/** 不包内容的骨架（SkeletonText 的各行、列表与表格的骨架行）的部件属性：加载与内容由组件管 */
+export type SkeletonShapeProps = Omit<Partial<SkeletonProps>, 'loading' | 'children' | 'propsContent'>;
+/** Skeleton 的样式：root、surface、wrapping、hidden */
+export declare const skeletonStyles: Readonly<{
+    hidden: css.CompiledStyles;
+    root: css.CompiledStyles;
+    surface: css.CompiledStyles;
+    wrapping: css.CompiledStyles;
+}>;
+/** Skeleton 的样式：text、heading、circle、button、image */
+export declare const skeletonVariantStyles: Readonly<{
+    button: css.CompiledStyles;
+    circle: css.CompiledStyles;
+    heading: css.CompiledStyles;
+    image: css.CompiledStyles;
+    text: css.CompiledStyles;
+}>;
+/** 骨架屏：加载时占位并扫光，包着内容时与内容一样大 */
+export declare const Skeleton: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SkeletonProps>;

package/dist/feedback/Skeleton.js

@@ -0,0 +1,100 @@
+import { t } from "../config/theme/tokens.js";
+import { mergeAttrs } from "../utils/props.js";
+import { shimmerVars } from "../utils/style/vars.js";
+import { shimmerStyles } from "../utils/style/shimmer.js";
+import { createVNode } from "vue";
+import { _component, childrenProp, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/Skeleton.tsx
+/** 骨架的常用形状 */
+/** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */
+/** 不包内容的骨架（SkeletonText 的各行、列表与表格的骨架行）的部件属性：加载与内容由组件管 */
+/** Skeleton 的样式：root、surface、wrapping、hidden */
+var skeletonStyles = css.create({
+	root: {
+		display: "inline-block",
+		borderRadius: "_sm",
+		[shimmerVars.highlight]: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,
+		pointerEvents: "none",
+		userSelect: "none"
+	},
+	surface: {
+		backgroundColor: {
+			default: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,
+			_forcedColors: "GrayText"
+		},
+		forcedColorAdjust: {
+			default: null,
+			_forcedColors: "none"
+		}
+	},
+	wrapping: { color: "transparent" },
+	hidden: { visibility: "hidden" }
+});
+/** Skeleton 的样式：text、heading、circle、button、image */
+var skeletonVariantStyles = css.create({
+	text: {
+		display: "block",
+		width: "_full",
+		height: "1em"
+	},
+	heading: {
+		display: "block",
+		width: "40%",
+		height: "1.5em"
+	},
+	circle: {
+		width: "2.5em",
+		height: "2.5em",
+		flexShrink: 0,
+		borderRadius: "_full"
+	},
+	button: {
+		width: "6em",
+		height: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+		flexShrink: 0,
+		borderRadius: "_md"
+	},
+	image: {
+		display: "block",
+		width: "_full",
+		aspectRatio: "16 / 9",
+		borderRadius: "_md"
+	}
+});
+/** 骨架屏：加载时占位并扫光，包着内容时与内容一样大 */
+var Skeleton = /*#__PURE__*/ _component((_props, _ctx) => {
+	const loading = readonlyProp(_props, "loading", true);
+	const variant = readonlyProp(_props, "variant");
+	const delay = readonlyProp(_props, "delay");
+	const propsContent = readonlyProp(_props, "propsContent");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	return () => {
+		if (!loading.value) return children.value;
+		const wrapping = children.value != null;
+		return createVNode("span", mergeAttrs({ sx: [
+			skeletonStyles.root,
+			skeletonStyles.surface,
+			shimmerStyles.wave,
+			variant.value && skeletonVariantStyles[variant.value],
+			!!delay.value && shimmerStyles.delay(`${delay.value}ms`),
+			wrapping && skeletonStyles.wrapping
+		] }, rest, {
+			"aria-hidden": true,
+			inert: wrapping || void 0
+		}), [wrapping && createVNode("span", mergeAttrs({ sx: skeletonStyles.hidden }, propsContent.value), [children.value])]);
+	};
+}, {
+	name: "Skeleton",
+	props: [
+		"loading",
+		"variant",
+		"delay",
+		"propsContent"
+	]
+});
+//#endregion
+export { Skeleton, skeletonStyles, skeletonVariantStyles };
+
+//# sourceMappingURL=Skeleton.js.map

package/dist/feedback/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","names":["_vtp_readonlyProp","_vtp_childrenProp","_vtp_restProps","_createVNode"],"sources":["../../src/feedback/Skeleton.tsx"],"sourcesContent":["/**\n * 骨架屏（span）：内容加载时的占位，一道光带从起始边扫过（shimmer.ts）。包着真实内容时，内容照常排版但不可见、\n * 不可交互，占位正好是内容的大小，加载完换成内容时布局不跳（同 Radix Themes 的 Skeleton）；\n * 不包内容时用 variant 选常用形状，或者由 sx 给大小。多行文字用 SkeletonText。\n *\n *   <Skeleton loading={loading}><Text>{user.name}</Text></Skeleton>\n *   <Skeleton variant=\"circle\" />\n *   <Skeleton variant=\"heading\" delay={SHIMMER_STAGGER} />      几块骨架依次扫过\n *   <Skeleton sx={styles.cover} />\n *\n * 占位对读屏隐藏；整块区域在加载时在外层加 aria-busy。减少动态效果时不扫光。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { shimmerStyles } from '../utils/style/shimmer';\nimport { shimmerVars } from '../utils/style/vars';\nimport { t } from '../config/theme/tokens';\n\n/** 骨架的常用形状 */\nexport interface SkeletonVariants {\n  /** 一行文字：高 1em，占满宽度 */\n  text: unknown;\n  /** 标题：高 1.5em，四成宽度 */\n  heading: unknown;\n  /** 圆：头像，边长 2.5em（与同字号的 Avatar 一样大） */\n  circle: unknown;\n  /** 按钮：控件高度，宽 6em */\n  button: unknown;\n  /** 图片：占满宽度，16:9 */\n  image: unknown;\n}\n\n/** 未声明的属性落到占位的 span 上（加载完成后不渲染它，只渲染内容） */\nexport interface SkeletonProps extends PartProps<'span', 'aria-hidden' | 'inert'> {\n  /**\n   * 是否在加载；false 时直接渲染内容\n   * @default true\n   */\n  loading?: boolean;\n  /** 形状；不写时大小由包着的内容或 sx 决定 */\n  variant?: keyof SkeletonVariants;\n  /** 扫光的延迟（毫秒）：几块骨架依次扫过、连成一道波时用（SkeletonText 的各行就是这样错开的） */\n  delay?: number;\n  /** 包着内容的那一层（不可见、只用来撑出大小）的部件属性 */\n  propsContent?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 不包内容的骨架（SkeletonText 的各行、列表与表格的骨架行）的部件属性：加载与内容由组件管 */\nexport type SkeletonShapeProps = Omit<\n  Partial<SkeletonProps>,\n  'loading' | 'children' | 'propsContent'\n>;\n\n/** Skeleton 的样式：root、surface、wrapping、hidden */\nexport const skeletonStyles = css.create({\n  root: {\n    display: 'inline-block',\n    borderRadius: '_sm',\n    // 底色与光带都是半透明的正文色：叠在任何表面（页面、卡片、浮层）上都比表面深一档（暗色主题里浅一档），\n    // 十二套主题不必各调一遍；光带叠在底色上，再深一档\n    [shimmerVars.highlight]: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  // 底色单独一项（root 里有 CSS 变量的键，条件取值放在一起时类型推不出来）。\n  // Windows 高对比下系统把背景色改掉，占位块就看不见了：用系统的灰色文字色\n  surface: {\n    backgroundColor: {\n      default: `color-mix(in oklab, ${t.colors.text} 9%, transparent)`,\n      _forcedColors: 'GrayText',\n    },\n    forcedColorAdjust: { default: null, _forcedColors: 'none' },\n  },\n  // 包着内容时：内容决定大小但看不见\n  wrapping: { color: 'transparent' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** Skeleton 的样式：text、heading、circle、button、image */\nexport const skeletonVariantStyles = css.create({\n  text: { display: 'block', width: '_full', height: '1em' },\n  heading: { display: 'block', width: '40%', height: '1.5em' },\n  circle: { width: '2.5em', height: '2.5em', flexShrink: 0, borderRadius: '_full' },\n  button: {\n    width: '6em',\n    height: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    flexShrink: 0,\n    borderRadius: '_md',\n  },\n  image: { display: 'block', width: '_full', aspectRatio: '16 / 9', borderRadius: '_md' },\n});\n\n/** 骨架屏：加载时占位并扫光，包着内容时与内容一样大 */\nexport const Skeleton = _component(\n  ({ loading = true, variant, delay, propsContent, children, ...rest }: SkeletonProps) =>\n    () => {\n      if (!loading) return children;\n      const wrapping = children != null;\n      return (\n        <span\n          {...mergeAttrs<'span'>(\n            {\n              sx: [\n                skeletonStyles.root,\n                skeletonStyles.surface,\n                shimmerStyles.wave,\n                variant && skeletonVariantStyles[variant],\n                !!delay && shimmerStyles.delay(`${delay}ms`),\n                wrapping && skeletonStyles.wrapping,\n              ],\n            },\n            rest,\n            {\n              'aria-hidden': true,\n              // 包着的内容（链接、按钮）不能被 Tab 聚焦\n              inert: wrapping || undefined,\n            },\n          )}\n        >\n          {wrapping && (\n            <span {...mergeAttrs<'span'>({ sx: skeletonStyles.hidden }, propsContent)}>\n              {children}\n            </span>\n          )}\n        </span>\n      );\n    },\n);\n"],"mappings":";;;;;;;;;;;;AAyDA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EACJ,SAAS;EACT,cAAc;GAGb,YAAY,YAAY,uBAAuB,EAAE,OAAO,KAAI;EAC7D,eAAe;EACf,YAAY;CACd;CAGA,SAAS;EACP,iBAAiB;GACf,SAAS,uBAAuB,EAAE,OAAO,KAAI;GAC7C,eAAe;EACjB;EACA,mBAAmB;GAAE,SAAS;GAAM,eAAe;EAAO;CAC5D;CAEA,UAAU,EAAE,OAAO,cAAc;CACjC,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,wBAAwB,IAAI,OAAO;CAC9C,MAAM;EAAE,SAAS;EAAS,OAAO;EAAS,QAAQ;CAAM;CACxD,SAAS;EAAE,SAAS;EAAS,OAAO;EAAO,QAAQ;CAAQ;CAC3D,QAAQ;EAAE,OAAO;EAAS,QAAQ;EAAS,YAAY;EAAG,cAAc;CAAQ;CAChF,QAAQ;EACN,OAAO;EACP,QAAQ,OAAO,EAAE,MAAM,QAAO,IAAK,EAAE,MAAM,UAAS;EACpD,YAAY;EACZ,cAAc;CAChB;CACA,OAAO;EAAE,SAAS;EAAS,OAAO;EAAS,aAAa;EAAU,cAAc;CAAM;AACxF,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAAA;CAAA,MAAA,UAAAA,aAAA,QAAA,WAAa,IAAI;CAAA,MAAA,UAAAA,aAAA,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAAA,WAAAC,aAAA,MAAA;CAAA,MAA6C,OAAIC,UAAA,QAAA,MAAA,KAAA;CAAA,aAC1D;EACJ,IAAI,CAAA,QAAA,OAAU,OAAA,SAAA;EACd,MAAM,WAAW,SAAA,SAAY;EAC7B,OAAAC,YAAA,QAEQ,WACF,EACE,IAAI;GACF,eAAe;GACf,eAAe;GACf,cAAc;GACd,QAAA,SAAW,sBAAqB,QAAA;GAChC,CAAC,CAAA,MAAA,SAAU,cAAc,MAAM,GAAA,MAAA,MAAA,GAAY;GAC3C,YAAY,eAAe;EAAQ,EAEvC,GACA,MACA;GACE,eAAe;GAEf,OAAO,YAAY,KAAA;EACrB,CACF,GAAC,CAEA,YAAQA,YAAA,QACG,WAAmB,EAAE,IAAI,eAAe,OAAO,GAAC,aAAA,KAAc,GAAC,CAAA,SAAA,KAAA,CAAA,CAG1E,CAAA;CAGP;AAAC,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}

package/dist/feedback/SkeletonText.d.ts

@@ -0,0 +1,25 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import { type PartProps } from '../utils/props';
+import { type SkeletonShapeProps } from './Skeleton';
+/** 未声明的属性落到外层 div 上 */
+export interface SkeletonTextProps extends PartProps<'div', 'aria-hidden'> {
+    /**
+     * 行数
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * 第一行扫光的延迟（毫秒），之后每行再晚一点
+     * @default 0
+     */
+    delay?: number;
+    /** 每一行（Skeleton）的部件属性 */
+    propsLine?: SkeletonShapeProps;
+}
+/** SkeletonText 的样式：root、last */
+export declare const skeletonTextStyles: Readonly<{
+    last: css.CompiledStyles;
+    root: css.CompiledStyles;
+}>;
+/** 多行文字的骨架：最后一行短一些 */
+export declare const SkeletonText: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<SkeletonTextProps>;

package/dist/feedback/SkeletonText.js

@@ -0,0 +1,40 @@
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import "../utils/style/shimmer.js";
+import { Skeleton } from "./Skeleton.js";
+import { createVNode, mergeProps } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+//#region src/feedback/SkeletonText.tsx
+/** 未声明的属性落到外层 div 上 */
+/** SkeletonText 的样式：root、last */
+var skeletonTextStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm"
+	},
+	last: { width: "60%" }
+});
+/** 多行文字的骨架：最后一行短一些 */
+var SkeletonText = /*#__PURE__*/ _component((_props, _ctx) => {
+	const lines = readonlyProp(_props, "lines", 3);
+	const delay = readonlyProp(_props, "delay", 0);
+	const propsLine = readonlyProp(_props, "propsLine");
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode("div", mergeAttrs({ sx: skeletonTextStyles.root }, rest, { "aria-hidden": true }), [Array.from({ length: lines.value }, (_, index) => createVNode(Skeleton, mergeProps({ "key": index }, mergePartProps({
+		variant: "text",
+		delay: delay.value + index * 120,
+		sx: lines.value > 1 && index === lines.value - 1 && skeletonTextStyles.last
+	}, propsLine.value)), null))]);
+}, {
+	name: "SkeletonText",
+	props: [
+		"lines",
+		"delay",
+		"propsLine"
+	]
+});
+//#endregion
+export { SkeletonText, skeletonTextStyles };
+
+//# sourceMappingURL=SkeletonText.js.map

package/dist/feedback/SkeletonText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonText.js","names":["_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps"],"sources":["../../src/feedback/SkeletonText.tsx"],"sourcesContent":["/**\n * 多行文字的骨架（div）：一段正文加载时的占位，几行 Skeleton，最后一行短一些（同 Ant Design 的 paragraph、\n * Chakra 的 SkeletonText）。行距与正文相近，换成内容时高度大致不变。各行的扫光依次错开，像一道波从上往下扫过。\n *\n *   <SkeletonText />\n *   <SkeletonText lines={5} />\n *   <SkeletonText delay={240} />      接在前面的骨架（标题、头像）后面扫\n *\n * 整块对读屏隐藏；在外层加 aria-busy。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { SHIMMER_STAGGER } from '../utils/style/shimmer';\nimport { Skeleton, type SkeletonProps, type SkeletonShapeProps } from './Skeleton';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SkeletonTextProps extends PartProps<'div', 'aria-hidden'> {\n  /**\n   * 行数\n   * @default 3\n   */\n  lines?: number;\n  /**\n   * 第一行扫光的延迟（毫秒），之后每行再晚一点\n   * @default 0\n   */\n  delay?: number;\n  /** 每一行（Skeleton）的部件属性 */\n  propsLine?: SkeletonShapeProps;\n}\n\n/** SkeletonText 的样式：root、last */\nexport const skeletonTextStyles = css.create({\n  // 1em 高的行加 0.5em 间隔，接近正文 1.5 的行高\n  root: { display: 'flex', flexDirection: 'column', gap: '_sm' },\n  last: { width: '60%' },\n});\n\n/** 多行文字的骨架：最后一行短一些 */\nexport const SkeletonText = _component(\n  ({ lines = 3, delay = 0, propsLine, ...rest }: SkeletonTextProps) =>\n    () => (\n      <div {...mergeAttrs<'div'>({ sx: skeletonTextStyles.root }, rest, { 'aria-hidden': true })}>\n        {Array.from({ length: lines }, (_, index) => (\n          <Skeleton\n            key={index}\n            {...mergePartProps<SkeletonProps>(\n              {\n                variant: 'text',\n                delay: delay + index * SHIMMER_STAGGER,\n                sx: lines > 1 && index === lines - 1 && skeletonTextStyles.last,\n              },\n              propsLine,\n            )}\n          />\n        ))}\n      </div>\n    ),\n);\n"],"mappings":";;;;;;;;;AAiCA,IAAa,qBAAqB,IAAI,OAAO;CAE3C,MAAM;EAAE,SAAS;EAAQ,eAAe;EAAU,KAAK;CAAM;CAC7D,MAAM,EAAE,OAAO,MAAM;AACvB,CAAC;;AAGD,IAAa,eAAe,0BAC1B,QAAA,SAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAW,CAAC;CAAA,MAAA,QAAAA,aAAA,QAAA,SAAU,CAAC;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAgB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACzCC,YAAA,OACW,WAAkB,EAAE,IAAI,mBAAmB,KAAK,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC,GAAC,CACvF,MAAM,KAAK,EAAE,QAAM,MAAA,MAAQ,IAAI,GAAG,UAAKA,YAAA,UAAAC,WAAA,EAAA,OAE/B,MAAK,GACN,eACF;EACE,SAAS;EACT,OAAO,MAAA,QAAQ,QAAA;EACf,IAAI,MAAA,QAAQ,KAAK,UAAU,MAAA,QAAQ,KAAK,mBAAmB;CAC7D,GAAC,UAAA,KAEH,CAAC,GAAA,IAAA,CAEJ,CAAC,CAAA;AAEL,GAAA;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACL"}