@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/feedback/Feedback.svelte

@@ -0,0 +1,330 @@
+<!--
+  Feedback — 用户反馈收集弹窗，严格对齐 Semi Feedback（feedback/index.tsx）。
+  纯组合本库外壳 + 内容子控件：
+    mode=popup（默认）→ SideSheet 外壳（bottom 抽屉，自绘 footer）；
+    mode=modal        → Modal 外壳（复用 Modal 内置 footer）。
+    type=emoji（默认）→ 😞😐😃 三档表情行，选 😞(bad) 时额外出可选 TextArea；
+    type=text         → TextArea；radio → RadioGroup；checkbox → CheckboxGroup；
+    type=custom       → children（由 renderContent 可选包裹）。
+  外壳的 focus-trap / inert / Esc / 背景锁滚均由 Modal / SideSheet 内置，直接复用。
+  value 归一化内联：string / string[] / EmojiResult。submit 禁用规则对齐 Semi
+  （无值或空数组时禁用）；onOk/onCancel 返回 Promise 时按钮 loading。
+
+  与 Semi 一致：radio/checkbox 选项经 radioGroupProps / checkboxGroupProps 透传，
+  无自造 options；emoji 为裸 span + click（无 roving tabindex / role=radio）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Modal } from '../modal/index.js';
+  import { SideSheet } from '../side-sheet/index.js';
+  import { TextArea } from '../input/index.js';
+  import { RadioGroup } from '../radio/index.js';
+  import type { RadioChangeEvent } from '../radio/context.js';
+  import { CheckboxGroup } from '../checkbox/index.js';
+  import { Button } from '../button/index.js';
+  import { useLocale } from '../locale-provider/index.js';
+
+  export type FeedbackMode = 'modal' | 'popup';
+  export type FeedbackType = 'text' | 'emoji' | 'radio' | 'checkbox' | 'custom';
+  /** emoji 类型的反馈值：可含 emoji 选择与附加文本。 */
+  export interface EmojiResult {
+    emoji?: string;
+    text?: string;
+  }
+  export type FeedbackValue = string | string[] | EmojiResult;
+
+  interface Props {
+    /** 呈现形态：popup=SideSheet 抽屉；modal=Modal 弹窗。对齐 Semi mode，默认 popup。 */
+    mode?: FeedbackMode;
+    /** 反馈类型。对齐 Semi type，默认 emoji。 */
+    type?: FeedbackType;
+    /** 反馈内容变化回调。对齐 Semi onValueChange。 */
+    onValueChange?: (value: FeedbackValue) => void;
+    /** 透传多行输入框参数。对齐 Semi textAreaProps。 */
+    textAreaProps?: Record<string, unknown>;
+    /** 透传单选组参数（含 options）。对齐 Semi radioGroupProps。 */
+    radioGroupProps?: Record<string, unknown>;
+    /** 透传多选组参数（含 options）。对齐 Semi checkboxGroupProps。 */
+    checkboxGroupProps?: Record<string, unknown>;
+    /** 自定义反馈内容展示：接收已渲染的默认内容 snippet。对齐 Semi renderContent。 */
+    renderContent?: Snippet<[Snippet]>;
+    /** 提交回调，返回 Promise 时 resolve 后自动关闭。对齐 Semi onOk。 */
+    onOk?: (e: MouseEvent) => void | Promise<unknown>;
+    /** 取消回调，返回 Promise 时 resolve 后自动关闭。对齐 Semi onCancel。 */
+    onCancel?: (e: MouseEvent) => void | Promise<unknown>;
+    /** 关闭后回调。对齐 Semi afterClose。 */
+    afterClose?: () => void;
+    /** 透传提交按钮参数。对齐 Semi okButtonProps。 */
+    okButtonProps?: Record<string, unknown>;
+    /** 透传取消按钮参数。对齐 Semi cancelButtonProps。 */
+    cancelButtonProps?: Record<string, unknown>;
+    /** type=custom 时的自定义内容。 */
+    children?: Snippet;
+    /** 自定义底部（透传外壳）。对齐 Semi footer：非空时替换默认双按钮。 */
+    footer?: Snippet | null;
+    class?: string;
+    /** 其余参数透传外壳（mode=modal → ModalProps；mode=popup → SideSheetProps）。 */
+    [key: string]: unknown;
+  }
+
+  let {
+    mode = 'popup',
+    type = 'emoji',
+    onValueChange,
+    textAreaProps,
+    radioGroupProps,
+    checkboxGroupProps,
+    renderContent,
+    onOk,
+    onCancel,
+    afterClose,
+    okButtonProps,
+    cancelButtonProps,
+    children,
+    footer,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const loc = useLocale();
+  const submitText = $derived(loc().t('Feedback.submit'));
+  const cancelText = $derived(loc().t('Feedback.cancel'));
+
+  // —— Emoji 表情（对齐 Semi constants.strings.Emoji）——
+  const EMOJI = { bad: '😞', normal: '😐', good: '😃' } as const;
+  const EMOJI_LIST = [EMOJI.bad, EMOJI.normal, EMOJI.good];
+
+  // —— value 受控归一化（内联）——
+  let value = $state<FeedbackValue | null>(null);
+  const emojiResult = $derived(
+    value && typeof value === 'object' && !Array.isArray(value) ? (value as EmojiResult) : ({} as EmojiResult),
+  );
+  const selectedEmoji = $derived(emojiResult.emoji);
+
+  function setValue(next: FeedbackValue) {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  // —— 各 type 变化处理（对齐 Semi foundation）——
+  function handleEmojiClick(emoji: string) {
+    setValue({ emoji });
+  }
+  function handleEmojiReasonChange(text: string) {
+    (textAreaProps?.onChange as ((v: string) => void) | undefined)?.(text);
+    setValue({ ...emojiResult, text });
+  }
+  function handleTextChange(text: string) {
+    (textAreaProps?.onChange as ((v: string) => void) | undefined)?.(text);
+    setValue(text);
+  }
+  function handleRadioChange(e: RadioChangeEvent) {
+    (radioGroupProps?.onChange as ((e: RadioChangeEvent) => void) | undefined)?.(e);
+    setValue(e.target.value as string);
+  }
+  function handleCheckboxChange(v: unknown[]) {
+    (checkboxGroupProps?.onChange as ((v: unknown[]) => void) | undefined)?.(v);
+    setValue(v.map(String));
+  }
+
+  // 提交禁用：无值或空数组（对齐 Semi disableSubmitButton）。
+  const disableSubmit = $derived(!value || (Array.isArray(value) && value.length === 0));
+
+  // —— 提交 / 取消 Promise 状态（对齐 Semi onOKReturnPromiseStatus）——
+  let okPending = $state(false);
+  let cancelPending = $state(false);
+
+  function isPromise(v: unknown): v is Promise<unknown> {
+    return !!v && typeof (v as Promise<unknown>).then === 'function';
+  }
+
+  // popup：自绘 footer 按钮，异步 loading，resolve 后清空 value（对齐 foundation.handleSubmit/handleCancel）。
+  function handleSubmit(e: MouseEvent) {
+    const result = onOk?.(e);
+    if (isPromise(result)) {
+      okPending = true;
+      result.then(() => { okPending = false; value = null; }).catch((err) => { okPending = false; throw err; });
+    } else {
+      value = null;
+    }
+  }
+  // SideSheet onCancel 传 MouseEvent | KeyboardEvent；onCancel 消费方按 MouseEvent 断言即可。
+  function handleCancelClick(e: MouseEvent | KeyboardEvent) {
+    const result = onCancel?.(e as MouseEvent);
+    if (isPromise(result)) {
+      cancelPending = true;
+      result.then(() => { cancelPending = false; value = null; }).catch((err) => { cancelPending = false; throw err; });
+    } else {
+      value = null;
+    }
+  }
+
+  // modal：交给 Modal 内置按钮（onOk/onCancel 无参），返回 Promise 则透传给 Modal（其自行 loading）。
+  function handleModalOk() {
+    const result = onOk?.(undefined as unknown as MouseEvent);
+    if (isPromise(result)) return result.then(() => { value = null; });
+    value = null;
+  }
+  function handleModalCancel() {
+    const result = onCancel?.(undefined as unknown as MouseEvent);
+    if (isPromise(result)) return result.then(() => { value = null; });
+    value = null;
+  }
+
+  const textPlaceholder = 'Provider additional feedback';
+  const reasonPlaceholder = 'Provider additional feedback(optional)';
+</script>
+
+<!-- 默认内容区：按 type 分发（renderContent 可包裹此 snippet）。 -->
+{#snippet defaultContent()}
+  {#if type === 'custom'}
+    {@render children?.()}
+  {:else if type === 'text'}
+    <TextArea placeholder={textPlaceholder} onChange={handleTextChange} {...textAreaProps ?? {}} />
+  {:else if type === 'emoji'}
+    <div class="cd-feedback-emoji-container">
+      {#each EMOJI_LIST as emoji (emoji)}
+        <span
+          class="cd-feedback-emoji-item"
+          class:cd-feedback-emoji-item-selected={emoji === selectedEmoji}
+          data-value={emoji}
+          role="button"
+          tabindex="0"
+          onclick={() => handleEmojiClick(emoji)}
+          onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleEmojiClick(emoji); } }}
+        >{emoji}</span>
+      {/each}
+    </div>
+    {#if selectedEmoji === EMOJI.bad}
+      <TextArea placeholder={reasonPlaceholder} onChange={handleEmojiReasonChange} {...textAreaProps ?? {}} />
+    {/if}
+  {:else if type === 'radio'}
+    <div class="cd-feedback-radio-container">
+      <RadioGroup direction="vertical" onChange={handleRadioChange} {...radioGroupProps ?? {}} />
+    </div>
+  {:else if type === 'checkbox'}
+    <div class="cd-feedback-checkbox-container">
+      <CheckboxGroup direction="vertical" onChange={handleCheckboxChange} {...checkboxGroupProps ?? {}} />
+    </div>
+  {/if}
+{/snippet}
+
+<!-- 内容出口：renderContent 存在则包裹默认内容，否则直接渲染。 -->
+{#snippet realContent()}
+  {#if renderContent}
+    {@render renderContent(defaultContent)}
+  {:else}
+    {@render defaultContent()}
+  {/if}
+{/snippet}
+
+<!-- popup 默认底部：取消(primary) + 提交(primary solid)，对齐 Semi renderFooter。 -->
+{#snippet defaultFooter()}
+  <div class="cd-feedback-footer">
+    <Button type="primary" loading={cancelPending} onclick={handleCancelClick} {...cancelButtonProps ?? {}}>
+      {cancelText}
+    </Button>
+    <Button type="primary" theme="solid" disabled={disableSubmit} loading={okPending} onclick={handleSubmit} {...okButtonProps ?? {}}>
+      {submitText}
+    </Button>
+  </div>
+{/snippet}
+
+{#if mode === 'modal'}
+  <Modal
+    okText={submitText}
+    cancelText={cancelText}
+    onOk={handleModalOk}
+    onCancel={handleModalCancel}
+    okButtonProps={{ disabled: disableSubmit, ...(okButtonProps ?? {}) }}
+    {...cancelButtonProps ? { cancelButtonProps } : {}}
+    {...afterClose ? { afterClose } : {}}
+    {...footer !== undefined ? { footer } : {}}
+    {...'width' in rest ? {} : { width: 'var(--cd-width-feedback)' }}
+    {...className ? { class: `cd-feedback cd-feedback-${type} ${className}` } : { class: `cd-feedback cd-feedback-${type}` }}
+    {...rest}
+  >
+    {@render realContent()}
+  </Modal>
+{:else}
+  <SideSheet
+    mask={false}
+    disableScroll={false}
+    placement="bottom"
+    height="auto"
+    onCancel={handleCancelClick}
+    footer={footer ?? defaultFooter}
+    {...className ? { class: `cd-feedback cd-feedback-${type} ${className}` } : { class: `cd-feedback cd-feedback-${type}` }}
+    {...rest}
+  >
+    {@render realContent()}
+  </SideSheet>
+{/if}
+
+<style>
+  /* emoji 表情行（对齐 Semi .feedback-emoji-container / -emoji-item） */
+  :global(.cd-feedback-emoji-container) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: var(--cd-spacing-feedback-emoji-container-column-gap);
+    align-self: stretch;
+    margin-top: var(--cd-spacing-feedback-emoji-container-margin-y);
+    margin-bottom: var(--cd-spacing-feedback-emoji-container-margin-y);
+  }
+  :global(.cd-feedback-emoji-item) {
+    user-select: none;
+    cursor: pointer;
+    font-size: var(--cd-font-feedback-emoji-font-size);
+    line-height: var(--cd-font-feedback-emoji-font-size);
+    height: var(--cd-font-feedback-emoji-font-size);
+    font-style: normal;
+    filter: grayscale(100%);
+  }
+  :global(.cd-feedback-emoji-item:hover),
+  :global(.cd-feedback-emoji-item-selected) {
+    filter: none;
+  }
+
+  /* 感谢文案（对齐 Semi .feedback-thank-text，供反馈完成态复用） */
+  :global(.cd-feedback-thank-text) {
+    color: var(--cd-color-feedback-thank-text);
+    text-align: center;
+    font-size: var(--cd-font-feedback-thank-text-font-size);
+    font-weight: var(--cd-font-feedback-thank-text-font-weight);
+    line-height: var(--cd-font-feedback-thank-text-line-height);
+    margin-top: var(--cd-spacing-feedback-thank-text-margin-top);
+    margin-bottom: var(--cd-spacing-feedback-thank-text-margin-bottom);
+  }
+
+  /* 多选组行间距（对齐 Semi .feedback .checkboxGroup-vertical） */
+  :global(.cd-feedback .cd-checkboxGroup-vertical) {
+    row-gap: var(--cd-spacing-feedback-checkbox-group-vertical-row-gap);
+  }
+
+  /* 底部按钮行（对齐 Semi .feedback-footer） */
+  :global(.cd-feedback-footer) {
+    display: flex;
+    justify-content: flex-end;
+    column-gap: var(--cd-spacing-feedback-footer-column-gap);
+  }
+
+  /* modal 宽度：所有 type 恒 400，经 width prop 传入（Modal 内联 width 无法用 CSS 覆盖），
+     对齐 Semi .feedback .modal / .feedback-text .modal（均 $width-feedback=400）。 */
+
+  /* sidesheet 圆角、宽度与底部定位（对齐 Semi .feedback .sidesheet-inner / -size-small / -text / -bottom） */
+  :global(.cd-feedback .cd-sidesheet-inner) {
+    border-radius: var(--cd-radius-feedback-sidesheet-inner);
+  }
+  /* 提高特异性赢过 SideSheet 的 .cd-sidesheet-size-small.cd-sidesheet（同为 400/600，对齐 Semi feedback 宽度）。 */
+  :global(.cd-sidesheet.cd-sidesheet-bottom.cd-feedback) {
+    width: var(--cd-width-feedback);
+  }
+  :global(.cd-sidesheet.cd-sidesheet-bottom.cd-feedback.cd-feedback-text) {
+    width: var(--cd-width-feedback-text);
+  }
+  :global(.cd-feedback.cd-sidesheet-bottom) {
+    right: var(--cd-spacing-feedback-sidesheet-bottom-right);
+    left: auto;
+  }
+</style>

package/dist/feedback/Feedback.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+export type FeedbackMode = 'modal' | 'popup';
+export type FeedbackType = 'text' | 'emoji' | 'radio' | 'checkbox' | 'custom';
+/** emoji 类型的反馈值：可含 emoji 选择与附加文本。 */
+export interface EmojiResult {
+    emoji?: string;
+    text?: string;
+}
+export type FeedbackValue = string | string[] | EmojiResult;
+interface Props {
+    /** 呈现形态：popup=SideSheet 抽屉；modal=Modal 弹窗。对齐 Semi mode，默认 popup。 */
+    mode?: FeedbackMode;
+    /** 反馈类型。对齐 Semi type，默认 emoji。 */
+    type?: FeedbackType;
+    /** 反馈内容变化回调。对齐 Semi onValueChange。 */
+    onValueChange?: (value: FeedbackValue) => void;
+    /** 透传多行输入框参数。对齐 Semi textAreaProps。 */
+    textAreaProps?: Record<string, unknown>;
+    /** 透传单选组参数（含 options）。对齐 Semi radioGroupProps。 */
+    radioGroupProps?: Record<string, unknown>;
+    /** 透传多选组参数（含 options）。对齐 Semi checkboxGroupProps。 */
+    checkboxGroupProps?: Record<string, unknown>;
+    /** 自定义反馈内容展示：接收已渲染的默认内容 snippet。对齐 Semi renderContent。 */
+    renderContent?: Snippet<[Snippet]>;
+    /** 提交回调，返回 Promise 时 resolve 后自动关闭。对齐 Semi onOk。 */
+    onOk?: (e: MouseEvent) => void | Promise<unknown>;
+    /** 取消回调，返回 Promise 时 resolve 后自动关闭。对齐 Semi onCancel。 */
+    onCancel?: (e: MouseEvent) => void | Promise<unknown>;
+    /** 关闭后回调。对齐 Semi afterClose。 */
+    afterClose?: () => void;
+    /** 透传提交按钮参数。对齐 Semi okButtonProps。 */
+    okButtonProps?: Record<string, unknown>;
+    /** 透传取消按钮参数。对齐 Semi cancelButtonProps。 */
+    cancelButtonProps?: Record<string, unknown>;
+    /** type=custom 时的自定义内容。 */
+    children?: Snippet;
+    /** 自定义底部（透传外壳）。对齐 Semi footer：非空时替换默认双按钮。 */
+    footer?: Snippet | null;
+    class?: string;
+    /** 其余参数透传外壳（mode=modal → ModalProps；mode=popup → SideSheetProps）。 */
+    [key: string]: unknown;
+}
+declare const Feedback: import("svelte").Component<Props, {}, "">;
+type Feedback = ReturnType<typeof Feedback>;
+export default Feedback;
+//# sourceMappingURL=Feedback.svelte.d.ts.map

package/dist/feedback/Feedback.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Feedback.svelte.d.ts","sourceRoot":"","sources":["../../src/feedback/Feedback.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAWpC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC;AAC7C,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC9E,qCAAqC;AACrC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,WAAW,CAAC;AAE5D,UAAU,KAAK;IACb,oEAAoE;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,kCAAkC;IAClC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,kDAAkD;IAClD,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC7C,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IACnC,oDAAoD;IACpD,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD,wDAAwD;IACxD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACtD,gCAAgC;IAChC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC5C,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2LH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/feedback/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Feedback } from './Feedback.svelte';
+export { meta as feedbackMeta } from './meta.js';
+export type { FeedbackMode, FeedbackType, FeedbackValue, EmojiResult } from './Feedback.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,WAAW,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/feedback/index.js

@@ -0,0 +1,2 @@
+export { default as Feedback } from './Feedback.svelte';
+export { meta as feedbackMeta } from './meta.js';

package/dist/feedback/meta.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * 严格对齐 Semi Feedback API 表（content/feedback/feedback/index.md §API 参考）。
+ */
+export declare const meta: {
+    readonly name: "Feedback";
+    readonly category: "feedback";
+    readonly stage: "M5";
+    readonly semiEquivalent: "Feedback";
+    readonly description: "用户反馈收集弹窗：以 SideSheet(popup) 或 Modal(modal) 形态收集 emoji 评分 / 文本 / 单选 / 多选 / 自定义反馈。纯组合本库 SideSheet/Modal + TextArea/RadioGroup/CheckboxGroup/Button。";
+    readonly props: readonly [{
+        readonly name: "mode";
+        readonly type: "'popup' | 'modal'";
+        readonly default: "popup";
+        readonly desc: "展示模式：popup=SideSheet 抽屉；modal=Modal 弹窗";
+    }, {
+        readonly name: "type";
+        readonly type: "'text' | 'emoji' | 'radio' | 'checkbox' | 'custom'";
+        readonly default: "emoji";
+        readonly desc: "反馈内容类型";
+    }, {
+        readonly name: "onValueChange";
+        readonly type: "(value: string | string[] | Object) => void";
+        readonly default: "-";
+        readonly desc: "反馈内容变化时的回调";
+    }, {
+        readonly name: "textAreaProps";
+        readonly type: "TextAreaProps";
+        readonly default: "-";
+        readonly desc: "设置多行输入框的参数";
+    }, {
+        readonly name: "radioGroupProps";
+        readonly type: "RadioGroupProps";
+        readonly default: "-";
+        readonly desc: "设置单选的参数（含 options）";
+    }, {
+        readonly name: "checkboxGroupProps";
+        readonly type: "CheckboxGroupProps";
+        readonly default: "-";
+        readonly desc: "设置多选的参数（含 options）";
+    }, {
+        readonly name: "renderContent";
+        readonly type: "(content: Snippet) => Snippet";
+        readonly default: "-";
+        readonly desc: "自定义反馈内容展示（接收已渲染的默认内容）";
+    }, {
+        readonly name: "onOk";
+        readonly type: "(e) => void | Promise<any>";
+        readonly default: "-";
+        readonly desc: "点击确定回调，返回 promise 时 resolve 后自动关闭";
+    }, {
+        readonly name: "onCancel";
+        readonly type: "(e) => void | Promise<any>";
+        readonly default: "-";
+        readonly desc: "取消回调，返回 promise 时 resolve 后自动关闭";
+    }, {
+        readonly name: "okButtonProps";
+        readonly type: "ButtonProps";
+        readonly default: "-";
+        readonly desc: "设置提交按钮的参数（type=custom 时可用 disabled 控制禁用）";
+    }, {
+        readonly name: "cancelButtonProps";
+        readonly type: "ButtonProps";
+        readonly default: "-";
+        readonly desc: "设置取消按钮的参数";
+    }, {
+        readonly name: "afterClose";
+        readonly type: "() => void";
+        readonly default: "-";
+        readonly desc: "关闭后回调";
+    }, {
+        readonly name: "...rest";
+        readonly type: "ModalProps | SideSheetProps";
+        readonly default: "-";
+        readonly desc: "mode=modal 透传 ModalProps；mode=popup 透传 SideSheetProps（含 visible/title/footer/width 等）";
+    }];
+    readonly i18nKeys: readonly ["Feedback.submit", "Feedback.cancel"];
+    readonly a11y: {
+        readonly role: "dialog";
+        readonly keyboard: readonly ["Esc"];
+        readonly notes: readonly ["外壳复用 Modal/SideSheet 的 role=dialog + focus-trap + Esc + 背景 inert", "emoji 为裸 span + click（对齐 Semi，无 role=radio / roving tabindex），补 Enter/Space 键盘触发"];
+    };
+    readonly examples: readonly [{
+        readonly title: "基本使用（popup + emoji）";
+        readonly code: "<Feedback title=\"您对本产品的评分是？\" visible={visible} onOk={...} onCancel={...} onValueChange={...} />";
+    }, {
+        readonly title: "文字类型";
+        readonly code: "<Feedback type=\"text\" textAreaProps={{ maxCount: 200 }} visible={visible} onOk={...} onCancel={...} />";
+    }, {
+        readonly title: "单选反馈";
+        readonly code: "<Feedback type=\"radio\" radioGroupProps={{ options: ['访客','开发者','维护者'] }} visible={visible} />";
+    }, {
+        readonly title: "多选反馈";
+        readonly code: "<Feedback type=\"checkbox\" checkboxGroupProps={{ options: ['抖音','火山','豆包'] }} visible={visible} />";
+    }, {
+        readonly title: "自定义反馈内容";
+        readonly code: "<Feedback type=\"custom\" okButtonProps={{ disabled: !value }} visible={visible}>{#snippet children()}...{/snippet}</Feedback>";
+    }, {
+        readonly title: "模态对话框形式";
+        readonly code: "<Feedback mode=\"modal\" visible={visible} onOk={...} onCancel={...} />";
+    }];
+    readonly doNot: readonly ["不要用它做通用表单——用 Form。", "type=custom 时须自行经 okButtonProps.disabled 控制提交禁用（对齐 Semi）。"];
+    readonly tokens: readonly ["--cd-color-feedback-thank-text", "--cd-width-feedback", "--cd-width-feedback-text", "--cd-spacing-feedback-emoji-container-column-gap", "--cd-spacing-feedback-emoji-container-margin-y", "--cd-spacing-feedback-thank-text-margin-top", "--cd-spacing-feedback-thank-text-margin-bottom", "--cd-spacing-feedback-checkbox-group-vertical-row-gap", "--cd-spacing-feedback-footer-column-gap", "--cd-spacing-feedback-sidesheet-bottom-right", "--cd-spacing-feedback-sidesheet-bottom-inner-wrap-bottom", "--cd-font-feedback-emoji-font-size", "--cd-font-feedback-thank-text-font-size", "--cd-font-feedback-thank-text-line-height", "--cd-font-feedback-thank-text-font-weight", "--cd-radius-feedback-sidesheet-inner"];
+};
+//# sourceMappingURL=meta.d.ts.map

package/dist/feedback/meta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/feedback/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DP,CAAC"}

package/dist/feedback/meta.js

@@ -0,0 +1,65 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * 严格对齐 Semi Feedback API 表（content/feedback/feedback/index.md §API 参考）。
+ */
+export const meta = {
+    name: 'Feedback',
+    category: 'feedback',
+    stage: 'M5',
+    semiEquivalent: 'Feedback',
+    description: '用户反馈收集弹窗：以 SideSheet(popup) 或 Modal(modal) 形态收集 emoji 评分 / 文本 / 单选 / 多选 / 自定义反馈。纯组合本库 SideSheet/Modal + TextArea/RadioGroup/CheckboxGroup/Button。',
+    props: [
+        { name: 'mode', type: "'popup' | 'modal'", default: 'popup', desc: '展示模式：popup=SideSheet 抽屉；modal=Modal 弹窗' },
+        { name: 'type', type: "'text' | 'emoji' | 'radio' | 'checkbox' | 'custom'", default: 'emoji', desc: '反馈内容类型' },
+        { name: 'onValueChange', type: '(value: string | string[] | Object) => void', default: '-', desc: '反馈内容变化时的回调' },
+        { name: 'textAreaProps', type: 'TextAreaProps', default: '-', desc: '设置多行输入框的参数' },
+        { name: 'radioGroupProps', type: 'RadioGroupProps', default: '-', desc: '设置单选的参数（含 options）' },
+        { name: 'checkboxGroupProps', type: 'CheckboxGroupProps', default: '-', desc: '设置多选的参数（含 options）' },
+        { name: 'renderContent', type: '(content: Snippet) => Snippet', default: '-', desc: '自定义反馈内容展示（接收已渲染的默认内容）' },
+        { name: 'onOk', type: '(e) => void | Promise<any>', default: '-', desc: '点击确定回调，返回 promise 时 resolve 后自动关闭' },
+        { name: 'onCancel', type: '(e) => void | Promise<any>', default: '-', desc: '取消回调，返回 promise 时 resolve 后自动关闭' },
+        { name: 'okButtonProps', type: 'ButtonProps', default: '-', desc: '设置提交按钮的参数（type=custom 时可用 disabled 控制禁用）' },
+        { name: 'cancelButtonProps', type: 'ButtonProps', default: '-', desc: '设置取消按钮的参数' },
+        { name: 'afterClose', type: '() => void', default: '-', desc: '关闭后回调' },
+        { name: '...rest', type: 'ModalProps | SideSheetProps', default: '-', desc: 'mode=modal 透传 ModalProps；mode=popup 透传 SideSheetProps（含 visible/title/footer/width 等）' },
+    ],
+    i18nKeys: ['Feedback.submit', 'Feedback.cancel'],
+    a11y: {
+        role: 'dialog',
+        keyboard: ['Esc'],
+        notes: [
+            '外壳复用 Modal/SideSheet 的 role=dialog + focus-trap + Esc + 背景 inert',
+            'emoji 为裸 span + click（对齐 Semi，无 role=radio / roving tabindex），补 Enter/Space 键盘触发',
+        ],
+    },
+    examples: [
+        { title: '基本使用（popup + emoji）', code: '<Feedback title="您对本产品的评分是？" visible={visible} onOk={...} onCancel={...} onValueChange={...} />' },
+        { title: '文字类型', code: '<Feedback type="text" textAreaProps={{ maxCount: 200 }} visible={visible} onOk={...} onCancel={...} />' },
+        { title: '单选反馈', code: "<Feedback type=\"radio\" radioGroupProps={{ options: ['访客','开发者','维护者'] }} visible={visible} />" },
+        { title: '多选反馈', code: "<Feedback type=\"checkbox\" checkboxGroupProps={{ options: ['抖音','火山','豆包'] }} visible={visible} />" },
+        { title: '自定义反馈内容', code: '<Feedback type="custom" okButtonProps={{ disabled: !value }} visible={visible}>{#snippet children()}...{/snippet}</Feedback>' },
+        { title: '模态对话框形式', code: '<Feedback mode="modal" visible={visible} onOk={...} onCancel={...} />' },
+    ],
+    doNot: [
+        '不要用它做通用表单——用 Form。',
+        'type=custom 时须自行经 okButtonProps.disabled 控制提交禁用（对齐 Semi）。',
+    ],
+    tokens: [
+        '--cd-color-feedback-thank-text',
+        '--cd-width-feedback',
+        '--cd-width-feedback-text',
+        '--cd-spacing-feedback-emoji-container-column-gap',
+        '--cd-spacing-feedback-emoji-container-margin-y',
+        '--cd-spacing-feedback-thank-text-margin-top',
+        '--cd-spacing-feedback-thank-text-margin-bottom',
+        '--cd-spacing-feedback-checkbox-group-vertical-row-gap',
+        '--cd-spacing-feedback-footer-column-gap',
+        '--cd-spacing-feedback-sidesheet-bottom-right',
+        '--cd-spacing-feedback-sidesheet-bottom-inner-wrap-bottom',
+        '--cd-font-feedback-emoji-font-size',
+        '--cd-font-feedback-thank-text-font-size',
+        '--cd-font-feedback-thank-text-line-height',
+        '--cd-font-feedback-thank-text-font-weight',
+        '--cd-radius-feedback-sidesheet-inner',
+    ],
+};