@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/TagInput.svelte

@@ -0,0 +1,108 @@
+<!--
+  =============================================================================
+  @h-ai/ui - TagInput 组件
+  =============================================================================
+  标签输入框组件
+
+  使用 Svelte 5 Runes ($props, $state, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { TagInputProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn, getInputSizeClass } from '../../utils.js'
+  import BareInput from '../primitives/BareInput.svelte'
+  import Tag from '../primitives/Tag.svelte'
+
+  let {
+    tags = $bindable([]),
+    placeholder,
+    maxTags = 0,
+    allowDuplicates = false,
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    onchange,
+  }: TagInputProps = $props()
+
+  let inputValue = $state('')
+  let inputElement = $state<HTMLInputElement | undefined>(undefined)
+
+  const displayPlaceholder = $derived(placeholder ?? uiM('tag_input_placeholder'))
+
+  const containerClass = $derived(
+    cn(
+      'input flex flex-wrap items-center gap-1 min-h-[2.5rem] h-auto py-1',
+      getInputSizeClass(size),
+      disabled && 'input-disabled',
+      className,
+    ),
+  )
+
+  const canAddMore = $derived(maxTags === 0 || tags.length < maxTags)
+
+  function addTag(value: string) {
+    const trimmed = value.trim()
+    if (!trimmed)
+      return
+    if (!allowDuplicates && tags.includes(trimmed))
+      return
+    if (!canAddMore)
+      return
+
+    tags = [...tags, trimmed]
+    inputValue = ''
+    onchange?.(tags)
+  }
+
+  function removeTag(index: number) {
+    tags = tags.filter((_, i) => i !== index)
+    onchange?.(tags)
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      addTag(inputValue)
+    }
+    else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+      removeTag(tags.length - 1)
+    }
+  }
+
+  function handleBlur() {
+    if (inputValue.trim()) {
+      addTag(inputValue)
+    }
+  }
+</script>
+
+<div
+  class={containerClass}
+  onclick={() => inputElement?.focus()}
+  onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
+  role='textbox'
+  tabindex='-1'
+>
+  {#each tags as tag, index (index)}
+    <Tag
+      text={tag}
+      size='sm'
+      closable={!disabled}
+      onclose={() => removeTag(index)}
+    />
+  {/each}
+
+  {#if canAddMore && !disabled}
+    <BareInput
+      type='text'
+      class='flex-1 min-w-[100px] bg-transparent border-none outline-none text-sm'
+      bind:value={inputValue}
+      bind:inputRef={inputElement}
+      placeholder={displayPlaceholder}
+      {disabled}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+    />
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { TagInputProps } from '../../types.js';
+declare const TagInput: import("svelte").Component<TagInputProps, {}, "tags">;
+type TagInput = ReturnType<typeof TagInput>;
+export default TagInput;

package/dist/components/compounds/Timeline.svelte

@@ -0,0 +1,167 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Timeline 组件
+  =============================================================================
+  时间线组件，支持垂直/水平方向、多种样式变体
+
+  使用 Svelte 5 Runes ($props, $derived)
+  使用 DaisyUI timeline 类
+  =============================================================================
+-->
+
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { TimelineItem } from './timeline-types.js'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 时间线项数据 */
+    items: TimelineItem[]
+    /** 方向 */
+    direction?: 'vertical' | 'horizontal'
+    /** 是否响应式（小屏垂直，大屏水平） */
+    responsive?: boolean
+    /** 内容位置 */
+    position?: 'start' | 'end' | 'alternate'
+    /** 是否紧凑模式 */
+    compact?: boolean
+    /** 是否使用盒子样式 */
+    boxed?: boolean
+    /** 图标对齐方式 */
+    snapIcon?: boolean
+    /** 自定义类名 */
+    class?: string
+    /** 自定义项渲染 */
+    children?: Snippet<[TimelineItem, number]>
+  }
+
+  const {
+    items,
+    direction = 'vertical',
+    responsive = false,
+    position = 'end',
+    compact = false,
+    boxed = false,
+    snapIcon = false,
+    class: className = '',
+    children,
+  }: Props = $props()
+
+  const timelineClass = $derived(
+    cn(
+      'timeline',
+      direction === 'vertical' && 'timeline-vertical',
+      direction === 'horizontal' && 'timeline-horizontal',
+      responsive && 'timeline-vertical lg:timeline-horizontal',
+      compact && 'timeline-compact',
+      snapIcon && 'timeline-snap-icon',
+      className,
+    ),
+  )
+
+  function getColorClass(color?: string): string {
+    const colorMap: Record<string, string> = {
+      primary: 'bg-primary text-primary-content',
+      secondary: 'bg-secondary text-secondary-content',
+      accent: 'bg-accent text-accent-content',
+      success: 'bg-success text-success-content',
+      warning: 'bg-warning text-warning-content',
+      error: 'bg-error text-error-content',
+      info: 'bg-info text-info-content',
+    }
+    return colorMap[color || 'default'] || 'bg-base-content'
+  }
+
+  function getLineColorClass(item: TimelineItem, isAfter: boolean): string {
+    if (!item.completed && isAfter)
+      return ''
+    return item.color ? `bg-${item.color}` : 'bg-primary'
+  }
+
+  function shouldShowStart(index: number): boolean {
+    if (position === 'start')
+      return true
+    if (position === 'alternate')
+      return index % 2 === 0
+    return false
+  }
+
+  function shouldShowEnd(index: number): boolean {
+    if (position === 'end')
+      return true
+    if (position === 'alternate')
+      return index % 2 === 1
+    return false
+  }
+</script>
+
+<ul class={timelineClass}>
+  {#each items as item, index (item.id)}
+    <li>
+      <!-- 前置连线 -->
+      {#if index > 0}
+        <hr class={cn(items[index - 1].completed && getLineColorClass(items[index - 1], true))} />
+      {/if}
+
+      <!-- 开始位置内容 -->
+      {#if position !== 'end' && shouldShowStart(index)}
+        <div class={cn('timeline-start', boxed && 'timeline-box')}>
+          {#if children}
+            {@render children(item, index)}
+          {:else}
+            {#if item.time}
+              <time class='text-xs text-base-content/60'>{item.time}</time>
+            {/if}
+            <div class='font-semibold'>{item.title}</div>
+            {#if item.description}
+              <p class='text-sm text-base-content/70'>{item.description}</p>
+            {/if}
+          {/if}
+        </div>
+      {:else if item.time && position === 'end'}
+        <div class='timeline-start text-xs text-base-content/60'>
+          {item.time}
+        </div>
+      {/if}
+
+      <!-- 中间图标 -->
+      <div class='timeline-middle'>
+        {#if item.icon}
+          <span class={cn(
+            'flex h-6 w-6 items-center justify-center rounded-full text-sm',
+            getColorClass(item.color),
+          )}>
+            {item.icon}
+          </span>
+        {:else}
+          <span class={cn(
+            'flex h-4 w-4 rounded-full',
+            item.completed ? getColorClass(item.color) : 'bg-base-300',
+          )}></span>
+        {/if}
+      </div>
+
+      <!-- 结束位置内容 -->
+      {#if position !== 'start' && shouldShowEnd(index)}
+        <div class={cn('timeline-end', boxed && 'timeline-box')}>
+          {#if children}
+            {@render children(item, index)}
+          {:else}
+            {#if item.time && position === 'alternate'}
+              <time class='text-xs text-base-content/60'>{item.time}</time>
+            {/if}
+            <div class='font-semibold'>{item.title}</div>
+            {#if item.description}
+              <p class='text-sm text-base-content/70'>{item.description}</p>
+            {/if}
+          {/if}
+        </div>
+      {/if}
+
+      <!-- 后置连线 -->
+      {#if index < items.length - 1}
+        <hr class={cn(item.completed && getLineColorClass(item, true))} />
+      {/if}
+    </li>
+  {/each}
+</ul>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from 'svelte';
+import type { TimelineItem } from './timeline-types.js';
+interface Props {
+    /** 时间线项数据 */
+    items: TimelineItem[];
+    /** 方向 */
+    direction?: 'vertical' | 'horizontal';
+    /** 是否响应式（小屏垂直，大屏水平） */
+    responsive?: boolean;
+    /** 内容位置 */
+    position?: 'start' | 'end' | 'alternate';
+    /** 是否紧凑模式 */
+    compact?: boolean;
+    /** 是否使用盒子样式 */
+    boxed?: boolean;
+    /** 图标对齐方式 */
+    snapIcon?: boolean;
+    /** 自定义类名 */
+    class?: string;
+    /** 自定义项渲染 */
+    children?: Snippet<[TimelineItem, number]>;
+}
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/components/compounds/ToastContainer.svelte

@@ -0,0 +1,59 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ToastContainer 组件
+  =============================================================================
+  Toast 容器组件，显示所有 Toast 通知
+
+  使用 Svelte 5 Runes ($derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import { uiM } from '../../messages.js'
+  import { toast } from '../../toast.svelte.js'
+  import { cn, getAlertVariantClass } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  const positionMap = {
+    'top-right': 'toast-top toast-end',
+    'top-left': 'toast-top toast-start',
+    'bottom-right': 'toast-bottom toast-end',
+    'bottom-left': 'toast-bottom toast-start',
+    'top-center': 'toast-top toast-center',
+    'bottom-center': 'toast-bottom toast-center',
+  }
+
+  // 按位置分组
+  const groupedItems = $derived(() => {
+    const groups: Record<string, typeof toast.items> = {}
+
+    for (const item of toast.items) {
+      const position = item.position ?? 'top-right'
+      if (!groups[position]) {
+        groups[position] = []
+      }
+      groups[position].push(item)
+    }
+
+    return groups
+  })
+</script>
+
+{#each Object.entries(groupedItems()) as [position, items]}
+  <div class={cn('toast z-50', positionMap[position as keyof typeof positionMap])}>
+    {#each items as item (item.id)}
+      <div class={cn('alert', getAlertVariantClass(item.variant ?? 'info'))}>
+        <span>{item.message}</span>
+        {#if item.dismissible}
+          <IconButton
+            variant='ghost'
+            size='sm'
+            onclick={() => toast.remove(item.id)}
+            ariaLabel={uiM('toast_dismiss')}
+          >
+            ✕
+          </IconButton>
+        {/if}
+      </div>
+    {/each}
+  </div>
+{/each}

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

@@ -0,0 +1,3 @@
+declare const ToastContainer: import("svelte").Component<Record<string, never>, {}, "">;
+type ToastContainer = ReturnType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/components/compounds/Tooltip.svelte

@@ -0,0 +1,41 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Tooltip 组件
+  =============================================================================
+  提示框组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { TooltipProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    content,
+    position = 'top',
+    class: className = '',
+    children,
+  }: TooltipProps = $props()
+
+  const positionMap = {
+    top: 'tooltip-top',
+    right: 'tooltip-right',
+    bottom: 'tooltip-bottom',
+    left: 'tooltip-left',
+  }
+
+  const tooltipClass = $derived(
+    cn(
+      'tooltip',
+      positionMap[position],
+      className,
+    ),
+  )
+</script>
+
+<div class={tooltipClass} data-tip={content}>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { TooltipProps } from '../../types.js';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,16 @@
+/**
+ * @h-ai/ui — Accordion 类型定义
+ * @module accordion-types
+ */
+export interface AccordionItem {
+    /** 唯一标识 */
+    id: string;
+    /** 标题 */
+    title: string;
+    /** 内容（字符串或 Snippet） */
+    content?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 图标（可选） */
+    icon?: string;
+}

package/dist/components/compounds/accordion-types.js

@@ -0,0 +1,5 @@
+/**
+ * @h-ai/ui — Accordion 类型定义
+ * @module accordion-types
+ */
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * @h-ai/ui — ActionSheet 类型定义
+ * @module action-sheet-types
+ */
+export interface ActionSheetItem {
+    /** 操作 ID */
+    id: string;
+    /** 显示文本 */
+    label: string;
+    /** 是否为危险操作（红色文字） */
+    destructive?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+}

package/dist/components/compounds/action-sheet-types.js

@@ -0,0 +1,5 @@
+/**
+ * @h-ai/ui — ActionSheet 类型定义
+ * @module action-sheet-types
+ */
+export {};

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

@@ -0,0 +1,17 @@
+/**
+ * @h-ai/ui — BottomNav 类型定义
+ * @module bottom-nav-types
+ */
+import type { Snippet } from 'svelte';
+export interface BottomNavItem {
+    /** 导航项 ID */
+    id: string;
+    /** 显示文本 */
+    label: string;
+    /** 图标 Snippet（与 iconClass 二选一） */
+    icon?: Snippet;
+    /** CSS 图标类名，如 'icon-[tabler--home]'（与 icon 二选一） */
+    iconClass?: string;
+    /** 角标数字 */
+    badge?: number;
+}

package/dist/components/compounds/bottom-nav-types.js

@@ -0,0 +1,5 @@
+/**
+ * @h-ai/ui — BottomNav 类型定义
+ * @module bottom-nav-types
+ */
+export {};

package/dist/components/compounds/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @h-ai/ui — 组合组件 (Compounds)
+ *
+ * 由多个原子组件组合而成的复杂 UI 模式，提供更完整的交互体验。
+ * @module index
+ */
+export type { AccordionItem } from './accordion-types.js';
+export { default as Accordion } from './Accordion.svelte';
+export type { ActionSheetItem } from './action-sheet-types.js';
+export { default as ActionSheet } from './ActionSheet.svelte';
+export { default as Alert } from './Alert.svelte';
+export { default as AppBar } from './AppBar.svelte';
+export type { BottomNavItem } from './bottom-nav-types.js';
+export { default as BottomNav } from './BottomNav.svelte';
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as Calendar } from './Calendar.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as Confirm } from './Confirm.svelte';
+export { default as DataTable } from './DataTable.svelte';
+export { default as DatePicker } from './DatePicker.svelte';
+export { default as Drawer } from './Drawer.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+export { default as Empty } from './Empty.svelte';
+export { default as Form } from './Form.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as InfiniteScroll } from './InfiniteScroll.svelte';
+export { default as Modal } from './Modal.svelte';
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as PullRefresh } from './PullRefresh.svelte';
+export { default as Result } from './Result.svelte';
+export { default as SafeArea } from './SafeArea.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Steps } from './Steps.svelte';
+export type { SwipeCellAction } from './swipe-cell-types.js';
+export { default as SwipeCell } from './SwipeCell.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as TagInput } from './TagInput.svelte';
+export type { TimelineItem } from './timeline-types.js';
+export { default as Timeline } from './Timeline.svelte';
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/compounds/index.js

@@ -0,0 +1,54 @@
+/**
+ * @h-ai/ui — 组合组件 (Compounds)
+ *
+ * 由多个原子组件组合而成的复杂 UI 模式，提供更完整的交互体验。
+ * @module index
+ */
+export { default as Accordion } from './Accordion.svelte';
+export { default as ActionSheet } from './ActionSheet.svelte';
+// 反馈提示
+export { default as Alert } from './Alert.svelte';
+// 移动端顶部应用栏
+export { default as AppBar } from './AppBar.svelte';
+export { default as BottomNav } from './BottomNav.svelte';
+// 导航控件
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+// 日历（Bits UI headless + DaisyUI 样式）
+export { default as Calendar } from './Calendar.svelte';
+// 数据展示
+export { default as Card } from './Card.svelte';
+// 可搜索下拉选择（Bits UI headless + DaisyUI 样式）
+export { default as Combobox } from './Combobox.svelte';
+export { default as Confirm } from './Confirm.svelte';
+export { default as DataTable } from './DataTable.svelte';
+// 日期选择器（Bits UI headless + DaisyUI 样式）
+export { default as DatePicker } from './DatePicker.svelte';
+// 弹层容器
+export { default as Drawer } from './Drawer.svelte';
+export { default as Dropdown } from './Dropdown.svelte';
+// 状态占位
+export { default as Empty } from './Empty.svelte';
+// 表单组合
+export { default as Form } from './Form.svelte';
+export { default as FormField } from './FormField.svelte';
+// 无限滚动 / 上拉加载
+export { default as InfiniteScroll } from './InfiniteScroll.svelte';
+export { default as Modal } from './Modal.svelte';
+// 页面头部
+export { default as PageHeader } from './PageHeader.svelte';
+export { default as Pagination } from './Pagination.svelte';
+export { default as Popover } from './Popover.svelte';
+// 下拉刷新
+export { default as PullRefresh } from './PullRefresh.svelte';
+export { default as Result } from './Result.svelte';
+// 安全区域包裹
+export { default as SafeArea } from './SafeArea.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as Steps } from './Steps.svelte';
+export { default as SwipeCell } from './SwipeCell.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export { default as TagInput } from './TagInput.svelte';
+export { default as Timeline } from './Timeline.svelte';
+// Toast（统一使用 store 驱动模式）
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { default as Tooltip } from './Tooltip.svelte';

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

@@ -0,0 +1,14 @@
+/**
+ * @h-ai/ui — SwipeCell 类型定义
+ * @module swipe-cell-types
+ */
+export interface SwipeCellAction {
+    /** 操作 ID */
+    id: string;
+    /** 显示文本 */
+    label: string;
+    /** 按钮变体 */
+    variant?: 'primary' | 'error' | 'warning' | 'info';
+    /** 按钮宽度（px） */
+    width?: number;
+}

package/dist/components/compounds/swipe-cell-types.js

@@ -0,0 +1,5 @@
+/**
+ * @h-ai/ui — SwipeCell 类型定义
+ * @module swipe-cell-types
+ */
+export {};

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

@@ -0,0 +1,20 @@
+/**
+ * @h-ai/ui — Timeline 类型定义
+ * @module timeline-types
+ */
+export interface TimelineItem {
+    /** 唯一标识 */
+    id: string;
+    /** 标题 */
+    title: string;
+    /** 描述内容 */
+    description?: string;
+    /** 时间/日期标签 */
+    time?: string;
+    /** 图标（可选，支持 emoji 或字符） */
+    icon?: string;
+    /** 状态颜色 */
+    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    /** 是否已完成 */
+    completed?: boolean;
+}

package/dist/components/compounds/timeline-types.js

@@ -0,0 +1,5 @@
+/**
+ * @h-ai/ui — Timeline 类型定义
+ * @module timeline-types
+ */
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @h-ai/ui — 组件导出
+ *
+ * 组件按三层划分：
+ * @module index
+ */
+export * from './compounds/index.js';
+export * from './primitives/index.js';
+export * from './scenes/index.js';

package/dist/components/index.js

@@ -0,0 +1,12 @@
+/**
+ * @h-ai/ui — 组件导出
+ *
+ * 组件按三层划分：
+ * @module index
+ */
+// 组合组件
+export * from './compounds/index.js';
+// 原子组件
+export * from './primitives/index.js';
+// 场景组件
+export * from './scenes/index.js';