@h-ai/ui 0.1.0-alpha.67 → 0.1.0-alpha.68

package/dist/components/compounds/Timeline.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component Timeline
   =============================================================================
   @h-ai/ui - Timeline 组件
   =============================================================================
@@ -7,6 +8,16 @@
   使用 Svelte 5 Runes ($props, $derived)
   使用 DaisyUI timeline 类
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Timeline } from '@h-ai/ui'
+  const props: ComponentProps<typeof Timeline> = { items: [{ id: 'created', title: '已创建', time: '2026-01-01', completed: true }] }
+  const component = mount(Timeline, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 
 <script lang='ts'>
@@ -15,6 +26,19 @@
   import type { TimelineItem } from './timeline-types.js'
   import { cn, getDataAttributes } from '../../utils.js'
 
+  /**
+   * Timeline 组件的属性契约；通过公开组件配置使用。
+   *
+   * @example
+   * ```ts
+   * import { mount, unmount } from 'svelte'
+   * import type { ComponentProps } from 'svelte'
+   * import { Timeline } from '@h-ai/ui'
+   * const props: ComponentProps<typeof Timeline> = { items: [{ id: 'created', title: '已创建', time: '2026-01-01', completed: true }] }
+   * const component = mount(Timeline, { target: document.body, props })
+   * await unmount(component)
+   * ```
+   */
   interface Props {
     /** 时间线项数据 */
     items: TimelineItem[]

package/dist/components/compounds/Timeline.svelte.d.ts

@@ -1,6 +1,19 @@
 import type { Snippet } from 'svelte';
 import type { DataAttributes } from '../../types.js';
 import type { TimelineItem } from './timeline-types.js';
+/**
+ * Timeline 组件的属性契约；通过公开组件配置使用。
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Timeline } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Timeline> = { items: [{ id: 'created', title: '已创建', time: '2026-01-01', completed: true }] }
+ * const component = mount(Timeline, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 interface Props {
     /** 时间线项数据 */
     items: TimelineItem[];
@@ -22,6 +35,27 @@ interface Props {
     children?: Snippet<[TimelineItem, number]>;
 }
 type $$ComponentProps = Props & DataAttributes;
+/**
+ * Timeline
+ * =============================================================================
+ * @h-ai/ui - Timeline 组件
+ * =============================================================================
+ * 时间线组件，支持垂直/水平方向、多种样式变体
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * 使用 DaisyUI timeline 类
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Timeline } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Timeline> = { items: [{ id: 'created', title: '已创建', time: '2026-01-01', completed: true }] }
+ * const component = mount(Timeline, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;
 export default Timeline;

package/dist/components/compounds/ToastContainer.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component ToastContainer
   =============================================================================
   @h-ai/ui - ToastContainer 组件
   =============================================================================
@@ -12,6 +13,16 @@
       作为最后子节点渲染在其内容之上）；
     - 否则寄宿到 <body> 并以 Popover 进入 top layer，叠加在普通内容之上。
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { ToastContainer } from '@h-ai/ui'
+  const props: ComponentProps<typeof ToastContainer> = { 'data-testid': 'toasts' }
+  const component = mount(ToastContainer, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes } from '../../types.js'

package/dist/components/compounds/ToastContainer.svelte.d.ts

@@ -1,4 +1,30 @@
 import type { DataAttributes } from '../../types.js';
+/**
+ * ToastContainer
+ * =============================================================================
+ * @h-ai/ui - ToastContainer 组件
+ * =============================================================================
+ * Toast 容器组件，显示所有 Toast 通知
+ *
+ * 使用 Svelte 5 Runes ($derived / $effect)
+ *
+ * 叠加策略（关键）：原生 <dialog>.showModal() 处于浏览器 top layer，且在 Chromium 中
+ * 始终渲染在 Popover 之上。为保证 Toast 永远可见、不被弹窗遮挡：
+ *   - 当存在已打开的 modal dialog 时，将 Toast 层寄宿到该 dialog 内部（同处 top layer，
+ *     作为最后子节点渲染在其内容之上）；
+ *   - 否则寄宿到 <body> 并以 Popover 进入 top layer，叠加在普通内容之上。
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { ToastContainer } from '@h-ai/ui'
+ * const props: ComponentProps<typeof ToastContainer> = { 'data-testid': 'toasts' }
+ * const component = mount(ToastContainer, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const ToastContainer: import("svelte").Component<DataAttributes, {}, "">;
 type ToastContainer = ReturnType<typeof ToastContainer>;
 export default ToastContainer;

package/dist/components/compounds/Tooltip.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component Tooltip
   =============================================================================
   @h-ai/ui - Tooltip 组件
   =============================================================================
@@ -8,6 +9,16 @@
 
   使用 Svelte 5 Runes ($props, $derived)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount, createRawSnippet } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Tooltip } from '@h-ai/ui'
+  const props: ComponentProps<typeof Tooltip> = { content: '复制链接', position: 'top', children: createRawSnippet(() => ({ render: () => "<span>复制</span>" })) }
+  const component = mount(Tooltip, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes, TooltipProps } from '../../types.js'

package/dist/components/compounds/Tooltip.svelte.d.ts

@@ -1,5 +1,27 @@
 import type { DataAttributes, TooltipProps } from '../../types.js';
 type $$ComponentProps = TooltipProps & DataAttributes;
+/**
+ * Tooltip
+ * =============================================================================
+ * @h-ai/ui - Tooltip 组件
+ * =============================================================================
+ * 提示框组件，支持两种渲染模式：
+ * - 默认：DaisyUI CSS 伪元素（::before），轻量无 JS 开销
+ * - portal：通过 document.body 渲染，不受父容器 overflow 裁剪
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount, createRawSnippet } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Tooltip } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Tooltip> = { content: '复制链接', position: 'top', children: createRawSnippet(() => ({ render: () => "<span>复制</span>" })) }
+ * const component = mount(Tooltip, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/components/compounds/accordion-types.d.ts

@@ -2,12 +2,21 @@
  * @h-ai/ui — Accordion 类型定义
  * @module accordion-types
  */
+/**
+ * 手风琴条目；id 应在当前条目集合内稳定且唯一。
+ *
+ * @example
+ * ```ts
+ * import type { AccordionItem } from '@h-ai/ui'
+ * const example: AccordionItem = { id: 'intro', title: '简介', content: '操作说明' }
+ * ```
+ */
 export interface AccordionItem {
     /** 唯一标识 */
     id: string;
     /** 标题 */
     title: string;
-    /** 内容（字符串或 Snippet） */
+    /** 纯文本内容；自定义渲染使用 Accordion 的 children Snippet。 */
     content?: string;
     /** 是否禁用 */
     disabled?: boolean;

package/dist/components/compounds/action-sheet-types.d.ts

@@ -2,6 +2,15 @@
  * @h-ai/ui — ActionSheet 类型定义
  * @module action-sheet-types
  */
+/**
+ * 底部操作菜单条目；危险动作可用 destructive 强调，禁用项不会触发选择。
+ *
+ * @example
+ * ```ts
+ * import type { ActionSheetItem } from '@h-ai/ui'
+ * const example: ActionSheetItem = { id: 'remove', label: '删除', destructive: true }
+ * ```
+ */
 export interface ActionSheetItem {
     /** 操作 ID */
     id: string;

package/dist/components/compounds/bottom-nav-types.d.ts

@@ -3,6 +3,15 @@
  * @module bottom-nav-types
  */
 import type { Snippet } from 'svelte';
+/**
+ * 移动端底部导航条目；icon 和 iconClass 任选一种图标来源。
+ *
+ * @example
+ * ```ts
+ * import type { BottomNavItem } from '@h-ai/ui'
+ * const example: BottomNavItem = { id: 'home', label: '首页', iconClass: 'icon-[tabler--home]' }
+ * ```
+ */
 export interface BottomNavItem {
     /** 导航项 ID */
     id: string;

package/dist/components/compounds/swipe-cell-types.d.ts

@@ -2,6 +2,15 @@
  * @h-ai/ui — SwipeCell 类型定义
  * @module swipe-cell-types
  */
+/**
+ * 滑动单元格的操作按钮；id 交给宿主完成实际业务动作。
+ *
+ * @example
+ * ```ts
+ * import type { SwipeCellAction } from '@h-ai/ui'
+ * const example: SwipeCellAction = { id: 'remove', label: '删除', variant: 'error', width: 80 }
+ * ```
+ */
 export interface SwipeCellAction {
     /** 操作 ID */
     id: string;

package/dist/components/compounds/timeline-types.d.ts

@@ -2,6 +2,15 @@
  * @h-ai/ui — Timeline 类型定义
  * @module timeline-types
  */
+/**
+ * 时间线节点的展示信息；completed 只控制界面状态，不提交业务操作。
+ *
+ * @example
+ * ```ts
+ * import type { TimelineItem } from '@h-ai/ui'
+ * const example: TimelineItem = { id: 'created', title: '已创建', time: '2026-01-01', completed: true }
+ * ```
+ */
 export interface TimelineItem {
     /** 唯一标识 */
     id: string;

package/dist/components/control-size.d.ts

@@ -1,4 +1,13 @@
 import type { Size } from '../types.js';
+/**
+ * 控件高度、间距与 DaisyUI 尺寸类的内部统一映射。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const classes: FormControlSizeClasses = getFormControlSizeClasses('lg')
+ * const inputClasses = classes.control
+ * ```
+ */
 interface FormControlSizeClasses {
     /** 固定高度，适用于单行控件 */
     height: string;
@@ -13,6 +22,14 @@ interface FormControlSizeClasses {
  * 获取输入类控件的统一尺寸类名。
  *
  * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ * @param size - 组件尺寸预设。
+ * @returns 统一的高度、最小高度、间距与控件尺寸类。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const classes = getFormControlSizeClasses('lg')
+ * const controlClass = classes.control
+ * ```
  */
 export declare function getFormControlSizeClasses(size: Size): FormControlSizeClasses;
 export {};

package/dist/components/control-size.js

@@ -12,6 +12,14 @@ const FORM_CONTROL_SIZE_CLASSES = {
  * 获取输入类控件的统一尺寸类名。
  *
  * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ * @param size - 组件尺寸预设。
+ * @returns 统一的高度、最小高度、间距与控件尺寸类。
+ *
+ * @example 模块内部上下文
+ * ```ts
+ * const classes = getFormControlSizeClasses('lg')
+ * const controlClass = classes.control
+ * ```
  */
 export function getFormControlSizeClasses(size) {
     return FORM_CONTROL_SIZE_CLASSES[size];

package/dist/components/primitives/Avatar.svelte

@@ -1,6 +1,16 @@
 <!--
   @component Avatar
   头像组件，支持图片、名字首字母 fallback
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Avatar } from '@h-ai/ui'
+  const props: ComponentProps<typeof Avatar> = { name: 'Ada', alt: '用户头像', size: 'md' }
+  const component = mount(Avatar, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { AvatarProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/Avatar.svelte.d.ts

@@ -3,6 +3,16 @@ type $$ComponentProps = AvatarProps & DataAttributes;
 /**
  * Avatar
  * 头像组件，支持图片、名字首字母 fallback
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Avatar } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Avatar> = { name: 'Ada', alt: '用户头像', size: 'md' }
+ * const component = mount(Avatar, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;

package/dist/components/primitives/Badge.svelte

@@ -1,6 +1,16 @@
 <!--
   @component Badge
   徽章组件，支持多种变体与尺寸
+
+  @example
+  ```ts
+  import { mount, unmount, createRawSnippet } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Badge } from '@h-ai/ui'
+  const props: ComponentProps<typeof Badge> = { variant: 'success', children: createRawSnippet(() => ({ render: () => "<span>已启用</span>" })) }
+  const component = mount(Badge, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { BadgeProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/Badge.svelte.d.ts

@@ -3,6 +3,16 @@ type $$ComponentProps = BadgeProps & DataAttributes;
 /**
  * Badge
  * 徽章组件，支持多种变体与尺寸
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount, createRawSnippet } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Badge } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Badge> = { variant: 'success', children: createRawSnippet(() => ({ render: () => "<span>已启用</span>" })) }
+ * const component = mount(Badge, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/primitives/BareButton.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component BareButton
   =============================================================================
   @h-ai/ui - BareButton 组件
   =============================================================================
@@ -6,6 +7,16 @@
 
   使用 Svelte 5 Runes ($props)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount, createRawSnippet } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { BareButton } from '@h-ai/ui'
+  const props: ComponentProps<typeof BareButton> = { type: 'button', ariaLabel: '关闭', children: createRawSnippet(() => ({ render: () => "<span>关闭</span>" })) }
+  const component = mount(BareButton, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { BareButtonProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/BareButton.svelte.d.ts

@@ -1,5 +1,25 @@
 import type { BareButtonProps, DataAttributes } from '../../types.js';
 type $$ComponentProps = BareButtonProps & DataAttributes;
+/**
+ * BareButton
+ * =============================================================================
+ * @h-ai/ui - BareButton 组件
+ * =============================================================================
+ * 无样式按钮组件（不注入 btn 类），用于自定义布局场景
+ *
+ * 使用 Svelte 5 Runes ($props)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount, createRawSnippet } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { BareButton } from '@h-ai/ui'
+ * const props: ComponentProps<typeof BareButton> = { type: 'button', ariaLabel: '关闭', children: createRawSnippet(() => ({ render: () => "<span>关闭</span>" })) }
+ * const component = mount(BareButton, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const BareButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type BareButton = ReturnType<typeof BareButton>;
 export default BareButton;

package/dist/components/primitives/BareInput.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component BareInput
   =============================================================================
   @h-ai/ui - BareInput 组件
   =============================================================================
@@ -6,6 +7,16 @@
 
   使用 Svelte 5 Runes ($props, $bindable)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { BareInput } from '@h-ai/ui'
+  const props: ComponentProps<typeof BareInput> = { name: 'query', type: 'search' }
+  const component = mount(BareInput, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { BareInputProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/BareInput.svelte.d.ts

@@ -1,5 +1,25 @@
 import type { BareInputProps, DataAttributes } from '../../types.js';
 type $$ComponentProps = BareInputProps & DataAttributes;
+/**
+ * BareInput
+ * =============================================================================
+ * @h-ai/ui - BareInput 组件
+ * =============================================================================
+ * 无样式输入框组件，仅渲染原生 input
+ *
+ * 使用 Svelte 5 Runes ($props, $bindable)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { BareInput } from '@h-ai/ui'
+ * const props: ComponentProps<typeof BareInput> = { name: 'query', type: 'search' }
+ * const component = mount(BareInput, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const BareInput: import("svelte").Component<$$ComponentProps, {}, "value" | "inputRef">;
 type BareInput = ReturnType<typeof BareInput>;
 export default BareInput;

package/dist/components/primitives/Button.svelte

@@ -1,6 +1,16 @@
 <!--
   @component Button
   通用按钮组件，支持多种变体和尺寸。
+
+  @example
+  ```ts
+  import { mount, unmount, createRawSnippet } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Button } from '@h-ai/ui'
+  const props: ComponentProps<typeof Button> = { variant: 'primary', type: 'submit', children: createRawSnippet(() => ({ render: () => "<span>保存</span>" })) }
+  const component = mount(Button, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { ButtonProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/Button.svelte.d.ts

@@ -3,6 +3,16 @@ type $$ComponentProps = ButtonProps & DataAttributes;
 /**
  * Button
  * 通用按钮组件，支持多种变体和尺寸。
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount, createRawSnippet } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Button } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Button> = { variant: 'primary', type: 'submit', children: createRawSnippet(() => ({ render: () => "<span>保存</span>" })) }
+ * const component = mount(Button, { target: document.body, props })
+ * await unmount(component)
+ * ```
  */
 declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/components/primitives/Checkbox.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component Checkbox
   =============================================================================
   @h-ai/ui - Checkbox 组件
   =============================================================================
@@ -6,6 +7,16 @@
 
   使用 Svelte 5 Runes ($props, $derived, $bindable)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Checkbox } from '@h-ai/ui'
+  const props: ComponentProps<typeof Checkbox> = { label: '同意条款', checked: true }
+  const component = mount(Checkbox, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { CheckboxProps, DataAttributes } from '../../types.js'

package/dist/components/primitives/Checkbox.svelte.d.ts

@@ -1,5 +1,25 @@
 import type { CheckboxProps, DataAttributes } from '../../types.js';
 type $$ComponentProps = CheckboxProps & DataAttributes;
+/**
+ * Checkbox
+ * =============================================================================
+ * @h-ai/ui - Checkbox 组件
+ * =============================================================================
+ * 复选框组件
+ *
+ * 使用 Svelte 5 Runes ($props, $derived, $bindable)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { Checkbox } from '@h-ai/ui'
+ * const props: ComponentProps<typeof Checkbox> = { label: '同意条款', checked: true }
+ * const component = mount(Checkbox, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/primitives/IconButton.svelte

@@ -1,4 +1,5 @@
 <!--
+  @component IconButton
   =============================================================================
   @h-ai/ui - IconButton 组件
   =============================================================================
@@ -6,6 +7,16 @@
 
   使用 Svelte 5 Runes ($props, $derived)
   =============================================================================
+
+  @example
+  ```ts
+  import { mount, unmount, createRawSnippet } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { IconButton } from '@h-ai/ui'
+  const props: ComponentProps<typeof IconButton> = { label: '关闭', tooltip: '关闭面板', children: createRawSnippet(() => ({ render: () => "<span>×</span>" })) }
+  const component = mount(IconButton, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes, IconButtonProps } from '../../types.js'

package/dist/components/primitives/IconButton.svelte.d.ts

@@ -1,5 +1,25 @@
 import type { DataAttributes, IconButtonProps } from '../../types.js';
 type $$ComponentProps = IconButtonProps & DataAttributes;
+/**
+ * IconButton
+ * =============================================================================
+ * @h-ai/ui - IconButton 组件
+ * =============================================================================
+ * 图标按钮组件
+ *
+ * 使用 Svelte 5 Runes ($props, $derived)
+ * =============================================================================
+ *
+ * @example
+ * ```ts
+ * import { mount, unmount, createRawSnippet } from 'svelte'
+ * import type { ComponentProps } from 'svelte'
+ * import { IconButton } from '@h-ai/ui'
+ * const props: ComponentProps<typeof IconButton> = { label: '关闭', tooltip: '关闭面板', children: createRawSnippet(() => ({ render: () => "<span>×</span>" })) }
+ * const component = mount(IconButton, { target: document.body, props })
+ * await unmount(component)
+ * ```
+ */
 declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

package/dist/components/primitives/Input.svelte

@@ -1,6 +1,16 @@
 <!--
   @component Input
   文本输入框组件，支持自定义验证消息
+
+  @example
+  ```ts
+  import { mount, unmount } from 'svelte'
+  import type { ComponentProps } from 'svelte'
+  import { Input } from '@h-ai/ui'
+  const props: ComponentProps<typeof Input> = { name: 'email', type: 'email', required: true }
+  const component = mount(Input, { target: document.body, props })
+  await unmount(component)
+  ```
 -->
 <script lang='ts'>
   import type { DataAttributes, InputProps } from '../../types.js'