@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/PullRefresh.svelte

@@ -0,0 +1,98 @@
+<!--
+  @h-ai/ui — PullRefresh（下拉刷新）
+
+  用法：
+  <PullRefresh onrefresh={async () => await loadData()} >
+    <div>列表内容</div>
+  </PullRefresh>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 刷新回调（需返回 Promise） */
+    onrefresh?: () => Promise<void>
+    /** 下拉触发距离（px） */
+    threshold?: number
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 额外 CSS 类 */
+    class?: string
+    /** 内容 */
+    children: Snippet
+  }
+
+  const {
+    onrefresh,
+    threshold = 80,
+    disabled = false,
+    class: className,
+    children,
+  }: Props = $props()
+
+  let pulling = $state(false)
+  let refreshing = $state(false)
+  let pullDistance = $state(0)
+  let startY = 0
+
+  function handleTouchStart(e: TouchEvent) {
+    if (disabled || refreshing)
+      return
+    startY = e.touches[0].clientY
+    pulling = true
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!pulling || disabled || refreshing)
+      return
+    const diff = e.touches[0].clientY - startY
+    if (diff > 0) {
+      pullDistance = Math.min(diff * 0.5, threshold * 1.5) // 阻尼
+    }
+  }
+
+  async function handleTouchEnd() {
+    if (!pulling || disabled)
+      return
+    pulling = false
+
+    if (pullDistance >= threshold && onrefresh) {
+      refreshing = true
+      try {
+        await onrefresh()
+      }
+      finally {
+        refreshing = false
+      }
+    }
+
+    pullDistance = 0
+  }
+</script>
+
+<div
+  class={cn('relative overflow-hidden', className)}
+  ontouchstart={handleTouchStart}
+  ontouchmove={handleTouchMove}
+  ontouchend={handleTouchEnd}
+  role='region'
+>
+  <!-- 刷新指示器 -->
+  <div
+    class='flex items-center justify-center text-sm text-base-content/60 overflow-hidden transition-all'
+    style='height: {pullDistance}px'
+  >
+    {#if refreshing}
+      <span class='loading loading-spinner loading-sm mr-2'></span>
+      Refreshing...
+    {:else if pullDistance >= threshold}
+      Release to refresh
+    {:else if pullDistance > 0}
+      Pull to refresh
+    {/if}
+  </div>
+
+  <!-- 内容区域 -->
+  {@render children()}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 刷新回调（需返回 Promise） */
+    onrefresh?: () => Promise<void>;
+    /** 下拉触发距离（px） */
+    threshold?: number;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 额外 CSS 类 */
+    class?: string;
+    /** 内容 */
+    children: Snippet;
+}
+declare const PullRefresh: import("svelte").Component<Props, {}, "">;
+type PullRefresh = ReturnType<typeof PullRefresh>;
+export default PullRefresh;

package/dist/components/compounds/Result.svelte

@@ -0,0 +1,84 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Result 组件
+  =============================================================================
+  结果页展示组件，用于操作反馈
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ResultProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    status = 'info',
+    title = '',
+    description = '',
+    class: className = '',
+    icon,
+    actions,
+    children,
+  }: ResultProps = $props()
+
+  const containerClass = $derived(
+    cn(
+      'flex flex-col items-center justify-center py-12 text-center',
+      className,
+    ),
+  )
+
+  const iconColor = $derived({
+    success: 'text-success',
+    error: 'text-error',
+    warning: 'text-warning',
+    info: 'text-info',
+  }[status])
+</script>
+
+<div class={containerClass}>
+  <!-- 图标区域 -->
+  <div class='w-20 h-20 mb-6 {iconColor}'>
+    {#if icon}
+      {@render icon()}
+    {:else if status === 'success'}
+      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' class='w-full h-full'>
+        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+      </svg>
+    {:else if status === 'error'}
+      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' class='w-full h-full'>
+        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
+      </svg>
+    {:else if status === 'warning'}
+      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' class='w-full h-full'>
+        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' />
+      </svg>
+    {:else}
+      <svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' class='w-full h-full'>
+        <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' />
+      </svg>
+    {/if}
+  </div>
+
+  <!-- 标题 -->
+  <h2 class='text-2xl font-semibold text-base-content'>{title}</h2>
+
+  <!-- 描述 -->
+  {#if description}
+    <p class='mt-2 text-base-content/70 max-w-md'>{description}</p>
+  {/if}
+
+  <!-- 自定义内容 -->
+  {#if children}
+    <div class='mt-4'>
+      {@render children()}
+    </div>
+  {/if}
+
+  <!-- 操作按钮区域 -->
+  {#if actions}
+    <div class='mt-6 flex gap-3'>
+      {@render actions()}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/compounds/SafeArea.svelte

@@ -0,0 +1,37 @@
+<!--
+  @h-ai/ui — SafeArea（安全区域包裹组件）
+
+  用法：
+  <SafeArea position="top">
+    <AppBar />
+  </SafeArea>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 安全区域位置 */
+    position?: 'top' | 'bottom' | 'all'
+    /** 额外 CSS 类 */
+    class?: string
+    /** 内容 */
+    children: Snippet
+  }
+
+  const {
+    position = 'all',
+    class: className,
+    children,
+  }: Props = $props()
+
+  const positionClasses = $derived({
+    top: 'hai-safe-top',
+    bottom: 'hai-safe-bottom',
+    all: 'hai-safe-all',
+  }[position])
+</script>
+
+<div class={cn(positionClasses, className)}>
+  {@render children()}
+</div>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 安全区域位置 */
+    position?: 'top' | 'bottom' | 'all';
+    /** 额外 CSS 类 */
+    class?: string;
+    /** 内容 */
+    children: Snippet;
+}
+declare const SafeArea: import("svelte").Component<Props, {}, "">;
+type SafeArea = ReturnType<typeof SafeArea>;
+export default SafeArea;

package/dist/components/compounds/Skeleton.svelte

@@ -0,0 +1,75 @@
+<!--
+  @component Skeleton
+  骨架屏占位组件，用于加载状态展示。
+-->
+<script lang='ts'>
+  import type { SkeletonProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    variant = 'text',
+    width = '',
+    height = '',
+    circle = false,
+    animation = true,
+    count = 1,
+    class: className = '',
+  }: SkeletonProps = $props()
+
+  const baseClass = $derived(
+    cn(
+      'skeleton',
+      animation && 'animate-pulse',
+      circle && 'rounded-full',
+      variant === 'text' && 'h-4',
+      variant === 'title' && 'h-6 w-3/4',
+      variant === 'avatar' && 'w-10 h-10 rounded-full',
+      variant === 'thumbnail' && 'w-24 h-24 rounded-lg',
+      variant === 'button' && 'h-10 w-24 rounded-lg',
+      variant === 'input' && 'h-10 w-full rounded-lg',
+      className,
+    ),
+  )
+
+  const style = $derived(
+    [
+      width && `width: ${width}`,
+      height && `height: ${height}`,
+    ].filter(Boolean).join('; '),
+  )
+</script>
+
+{#if count > 1}
+  <div class='space-y-2'>
+    {#each Array.from({ length: count }) as _, i (i)}
+      <div class={baseClass} {style}></div>
+    {/each}
+  </div>
+{:else}
+  <div class={baseClass} {style}></div>
+{/if}
+
+<style>
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      oklch(var(--b3)) 25%,
+      oklch(var(--b2)) 50%,
+      oklch(var(--b3)) 75%
+    );
+    background-size: 200% 100%;
+  }
+
+  .skeleton.animate-pulse {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+  }
+
+  @keyframes skeleton-pulse {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { SkeletonProps } from '../../types.js';
+/**
+ * Skeleton
+ * 骨架屏占位组件，用于加载状态展示。
+ */
+declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/compounds/Steps.svelte

@@ -0,0 +1,111 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Steps 组件
+  =============================================================================
+  步骤条组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { StepsProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    items = [],
+    current = 0,
+    direction = 'horizontal',
+    size = 'md',
+    clickable = false,
+    class: className = '',
+    onchange,
+  }: StepsProps = $props()
+
+  const containerClass = $derived(
+    cn(
+      'steps',
+      direction === 'vertical' && 'steps-vertical',
+      className,
+    ),
+  )
+
+  const stepSizeClass = $derived({
+    xs: 'step-xs',
+    sm: 'step-sm',
+    md: '',
+    lg: 'step-lg',
+  }[size] || '')
+
+  function getStepStatus(index: number): 'completed' | 'current' | 'pending' {
+    if (index < current)
+      return 'completed'
+    if (index === current)
+      return 'current'
+    return 'pending'
+  }
+
+  function getStepClass(index: number) {
+    const status = getStepStatus(index)
+    return cn(
+      'step',
+      stepSizeClass,
+      status === 'completed' && 'step-primary',
+      status === 'current' && 'step-primary',
+      clickable && 'cursor-pointer hover:opacity-80',
+    )
+  }
+
+  function handleClick(index: number) {
+    if (clickable) {
+      onchange?.(index)
+    }
+  }
+</script>
+
+<ul class={containerClass}>
+  {#each items as item, index (index)}
+    {#if clickable}
+      <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+      <li
+        class={getStepClass(index)}
+        data-content={item.icon || (index < current ? '✓' : index + 1)}
+        onclick={() => handleClick(index)}
+        onkeydown={e => e.key === 'Enter' && handleClick(index)}
+        role='button'
+        tabindex='0'
+      >
+        <div class='step-content'>
+          <span class='font-medium'>{item.title}</span>
+          {#if item.description}
+            <span class='text-xs text-base-content/60'>{item.description}</span>
+          {/if}
+        </div>
+      </li>
+    {:else}
+      <li
+        class={getStepClass(index)}
+        data-content={item.icon || (index < current ? '✓' : index + 1)}
+      >
+        <div class='step-content'>
+          <span class='font-medium'>{item.title}</span>
+          {#if item.description}
+            <span class='text-xs text-base-content/60'>{item.description}</span>
+          {/if}
+        </div>
+      </li>
+    {/if}
+  {/each}
+</ul>
+
+<style>
+  .step-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .steps-vertical .step-content {
+    margin-left: 0.5rem;
+  }
+</style>

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

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

package/dist/components/compounds/SwipeCell.svelte

@@ -0,0 +1,115 @@
+<!--
+  @h-ai/ui — SwipeCell（滑动操作 — 列表项左滑删除等）
+
+  用法：
+  <SwipeCell
+    actions={[
+      { id: 'delete', label: '删除', variant: 'error' },
+    ]}
+    onaction={(id) => handleAction(id)}
+  >
+    <div class="p-4">列表项内容</div>
+  </SwipeCell>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import type { SwipeCellAction } from './swipe-cell-types.js'
+  import { cn } from '../../utils.js'
+
+  // eslint-disable-next-line no-import-assign -- type re-export
+  export type { SwipeCellAction }
+
+  interface Props {
+    /** 右侧操作列表 */
+    actions: SwipeCellAction[]
+    /** 操作回调 */
+    onaction?: (id: string) => void
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 额外 CSS 类 */
+    class?: string
+    /** 内容 */
+    children: Snippet
+  }
+
+  const {
+    actions,
+    onaction,
+    disabled = false,
+    class: className,
+    children,
+  }: Props = $props()
+
+  let offsetX = $state(0)
+  let startX = 0
+  let swiping = false
+
+  const totalActionWidth = $derived(actions.reduce((sum, a) => sum + (a.width ?? 72), 0))
+
+  function handleTouchStart(e: TouchEvent) {
+    if (disabled)
+      return
+    startX = e.touches[0].clientX
+    swiping = true
+  }
+
+  function handleTouchMove(e: TouchEvent) {
+    if (!swiping || disabled)
+      return
+    const diff = startX - e.touches[0].clientX
+    // 只允许左滑
+    offsetX = Math.max(0, Math.min(diff, totalActionWidth))
+  }
+
+  function handleTouchEnd() {
+    if (!swiping)
+      return
+    swiping = false
+    // 超过一半则展开，否则收回
+    offsetX = offsetX > totalActionWidth / 2 ? totalActionWidth : 0
+  }
+
+  function handleAction(id: string) {
+    onaction?.(id)
+    offsetX = 0
+  }
+
+  const variantBg: Record<string, string> = {
+    primary: 'bg-primary text-primary-content',
+    error: 'bg-error text-error-content',
+    warning: 'bg-warning text-warning-content',
+    info: 'bg-info text-info-content',
+  }
+</script>
+
+<div class={cn('relative overflow-hidden', className)}>
+  <!-- 内容层 -->
+  <div
+    class='relative transition-transform'
+    style='transform: translateX(-{offsetX}px)'
+    ontouchstart={handleTouchStart}
+    ontouchmove={handleTouchMove}
+    ontouchend={handleTouchEnd}
+    role='row'
+    tabindex='0'
+  >
+    {@render children()}
+  </div>
+
+  <!-- 操作按钮层 -->
+  <div class='absolute top-0 right-0 h-full flex' style='transform: translateX({totalActionWidth - offsetX}px)'>
+    {#each actions as action (action.id)}
+      <button
+        type='button'
+        class={cn(
+          'flex items-center justify-center h-full text-sm font-medium',
+          variantBg[action.variant ?? 'primary'],
+        )}
+        style='width: {action.width ?? 72}px'
+        onclick={() => handleAction(action.id)}
+      >
+        {action.label}
+      </button>
+    {/each}
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { SwipeCellAction } from './swipe-cell-types.js';
+interface Props {
+    /** 右侧操作列表 */
+    actions: SwipeCellAction[];
+    /** 操作回调 */
+    onaction?: (id: string) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 额外 CSS 类 */
+    class?: string;
+    /** 内容 */
+    children: Snippet;
+}
+declare const SwipeCell: import("svelte").Component<Props, {
+    SwipeCellAction: typeof SwipeCellAction;
+}, "">;
+type SwipeCell = ReturnType<typeof SwipeCell>;
+export default SwipeCell;

package/dist/components/compounds/Tabs.svelte

@@ -0,0 +1,79 @@
+<!--
+  @component Tabs
+  标签页组件，支持 line/card/pills 三种样式。
+-->
+<script lang='ts'>
+  import type { TabsProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+  import BareButton from '../primitives/BareButton.svelte'
+
+  let {
+    items,
+    active = $bindable(''),
+    size = 'md',
+    type = 'line',
+    class: className = '',
+    onchange,
+    children,
+  }: TabsProps = $props()
+
+  // 默认选中第一个
+  $effect(() => {
+    if (!active && items.length > 0) {
+      active = items[0].key
+    }
+  })
+
+  const typeMap = {
+    line: 'tabs-border',
+    card: 'tabs-box',
+    pills: 'tabs-box',
+  }
+
+  const sizeMap = {
+    'xs': 'tabs-xs',
+    'sm': 'tabs-sm',
+    'md': '',
+    'lg': 'tabs-lg',
+    'xl': 'tabs-lg',
+    '2xl': 'tabs-lg',
+    '3xl': 'tabs-lg',
+    '4xl': 'tabs-lg',
+  }
+
+  const tabsClass = $derived(
+    cn(
+      'tabs',
+      typeMap[type],
+      sizeMap[size],
+      className,
+    ),
+  )
+
+  function handleSelect(key: string) {
+    active = key
+    onchange?.(key)
+  }
+</script>
+
+<div role='tablist' class={tabsClass}>
+  {#each items as item}
+    <BareButton
+      role='tab'
+      class={cn('tab', active === item.key && 'tab-active')}
+      disabled={item.disabled}
+      onclick={() => handleSelect(item.key)}
+    >
+      {#if item.icon}
+        <span class='mr-1'>{item.icon}</span>
+      {/if}
+      {item.label}
+    </BareButton>
+  {/each}
+</div>
+
+{#if children}
+  <div class='py-4'>
+    {@render children()}
+  </div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { TabsProps } from '../../types.js';
+/**
+ * Tabs
+ * 标签页组件，支持 line/card/pills 三种样式。
+ */
+declare const Tabs: import("svelte").Component<TabsProps, {}, "active">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;