@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/Combobox.svelte

@@ -0,0 +1,327 @@
+<!--
+  @component Combobox
+  可搜索下拉选择组件，基于 Bits UI headless + DaisyUI 样式。
+  支持单选和多选模式，带搜索过滤、键盘导航、无障碍支持。
+  多选模式下以标签形式展示已选项。
+
+  @prop {Option[]} options - 选项列表
+  @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
+  @prop {boolean} multiple - 是否多选模式
+  @prop {string} placeholder - 输入框占位符
+  @prop {boolean} disabled - 是否禁用
+  @prop {string} error - 错误消息
+  @prop {string} label - 表单标签
+  @prop {string} class - 自定义类名
+  @prop {function} onchange - 值变更回调
+
+  @example 单选
+  <Combobox
+    options={[
+      { value: 'svelte', label: 'Svelte' },
+      { value: 'react', label: 'React' },
+    ]}
+    bind:value={framework}
+    placeholder="搜索框架..."
+  />
+
+  @example 多选
+  <Combobox
+    options={skills}
+    bind:value={selectedSkills}
+    multiple
+    placeholder="搜索技能..."
+  />
+-->
+<script lang='ts'>
+  import { Combobox } from 'bits-ui'
+  import { uiM } from '../../messages.js'
+  import BareButton from '../primitives/BareButton.svelte'
+
+  /** 选项定义 */
+  interface Option {
+    /** 选项值 */
+    value: string
+    /** 显示标签 */
+    label: string
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 描述文本（仅在多选模式下展示） */
+    description?: string
+  }
+
+  interface Props {
+    /** 选项列表 */
+    options: Option[]
+    /** 选中值（双向绑定，单选为 string，多选为 string[]） */
+    value?: string | string[]
+    /** 是否多选模式 */
+    multiple?: boolean
+    /** 输入框占位符 */
+    placeholder?: string
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 错误消息 */
+    error?: string
+    /** 表单标签 */
+    label?: string
+    /** 自定义类名 */
+    class?: string
+    /** 值变更回调 */
+    onchange?: (value: string | string[]) => void
+  }
+
+  let {
+    options,
+    value = $bindable(),
+    multiple = false,
+    placeholder = '',
+    disabled = false,
+    error,
+    label: fieldLabel,
+    class: className = '',
+    onchange,
+  }: Props = $props()
+
+  // 为未提供 value 时设置初始默认值（仅在初始化时执行一次）
+  // 统一以空字符串初始化，避免在初始化阶段捕获 multiple 的初始值。
+  // 多选模式会通过 multiVal 派生为 [] 传给 Combobox.Root。
+  if (value === undefined) {
+    value = ''
+  }
+
+  let searchValue = $state('')
+  let open = $state(false)
+
+  /** 根据搜索关键词过滤选项 */
+  const filteredOptions = $derived(
+    searchValue === ''
+      ? options
+      : options.filter((opt) => {
+        const keyword = searchValue.toLowerCase()
+        const inLabel = opt.label.toLowerCase().includes(keyword)
+        const inDescription = opt.description?.toLowerCase().includes(keyword) ?? false
+        return inLabel || inDescription
+      }),
+  )
+
+  /** 单选模式：输入框显示值（打开时显示搜索词，关闭时显示选中项标签） */
+  const singleInputValue = $derived.by(() => {
+    if (open)
+      return searchValue
+    return options.find(o => o.value === value)?.label ?? ''
+  })
+
+  /** 多选模式：输入框始终显示搜索词 */
+  const multiInputValue = $derived(searchValue)
+
+  /** 多选模式下已选中的选项列表 */
+  const selectedOptions = $derived(
+    Array.isArray(value)
+      ? options.filter(opt => (value as string[]).includes(opt.value))
+      : [],
+  )
+
+  /** 多选模式：提供给 Combobox.Root 的类型安全值 */
+  const multiVal = $derived(Array.isArray(value) ? value as string[] : [])
+
+  /** 单选模式：提供给 Combobox.Root 的类型安全值 */
+  const singleVal = $derived(typeof value === 'string' ? value : '')
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    searchValue = e.currentTarget.value
+    if (!open)
+      open = true
+  }
+
+  function handleOpenChange(newOpen: boolean) {
+    if (!newOpen)
+      searchValue = ''
+  }
+
+  function handleMultiValueChange(v: string[]) {
+    value = v
+    onchange?.(v)
+  }
+
+  function handleSingleValueChange(v: string) {
+    value = v
+    onchange?.(v)
+  }
+
+  /** 多选模式下移除某个已选项 */
+  function removeItem(val: string, event: MouseEvent) {
+    event.stopPropagation()
+    if (!Array.isArray(value))
+      return
+    const newValue = (value as string[]).filter(v => v !== val)
+    value = newValue
+    onchange?.(newValue)
+  }
+</script>
+
+<div class='fieldset w-full {className}'>
+  {#if fieldLabel}
+    <legend class='fieldset-legend font-medium'>{fieldLabel}</legend>
+  {/if}
+
+  {#if multiple}
+    <!-- 多选模式 -->
+    <Combobox.Root
+      type='multiple'
+      items={filteredOptions}
+      inputValue={multiInputValue}
+      value={multiVal}
+      bind:open
+      {disabled}
+      onOpenChange={handleOpenChange}
+      onValueChange={handleMultiValueChange}
+    >
+      <div class='relative'>
+        <div
+          class="min-h-10 px-2 py-1.5 pr-8 border rounded-lg bg-base-100 flex flex-wrap gap-1.5 items-center transition-colors
+            {disabled ? 'opacity-50 cursor-not-allowed bg-base-200' : 'cursor-text'}
+            {error ? 'border-error focus-within:border-error' : 'border-base-content/20 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20'}"
+        >
+          {#each selectedOptions as opt (opt.value)}
+            <span class='inline-flex items-center gap-1 px-2 py-0.5 bg-primary/10 text-primary text-sm rounded-md'>
+              <span class='truncate max-w-32'>{opt.label}</span>
+              {#if !disabled}
+                <BareButton
+                  type='button'
+                  class='hover:bg-primary/20 rounded p-0.5 transition-colors'
+                  onclick={e => removeItem(opt.value, e)}
+                  ariaLabel="{uiM('combobox_remove')} {opt.label}"
+                >
+                  <span class='icon-[tabler--x] size-3'></span>
+                </BareButton>
+              {/if}
+            </span>
+          {/each}
+
+          <Combobox.Input
+            class='flex-1 min-w-20 bg-transparent outline-none text-sm py-0.5'
+            placeholder={selectedOptions.length === 0 ? placeholder : ''}
+            {disabled}
+            oninput={handleInput}
+            onfocus={() => {
+              if (!disabled)
+                open = true
+            }}
+          />
+        </div>
+
+        <Combobox.Trigger
+          class='absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle'
+        >
+          <span class="icon-[tabler--chevron-down] size-4 transition-transform {open ? 'rotate-180' : ''}"></span>
+        </Combobox.Trigger>
+      </div>
+
+      <Combobox.Portal>
+        <Combobox.Content
+          class='z-50 mt-1 max-h-60 w-[var(--bits-combobox-anchor-width)] overflow-y-auto rounded-lg border border-base-content/10 bg-base-100 p-1 shadow-lg'
+          sideOffset={4}
+        >
+          {#if filteredOptions.length === 0}
+            <div class='px-3 py-2 text-sm text-base-content/50'>
+              {uiM('combobox_no_match')}
+            </div>
+          {:else}
+            {#each filteredOptions as opt (opt.value)}
+              <Combobox.Item
+                value={opt.value}
+                label={opt.label}
+                disabled={opt.disabled}
+                class='flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-base-200 data-[highlighted]:bg-base-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+              >
+                {#snippet children({ selected })}
+                  <span class="size-4 shrink-0 rounded border border-base-content/30 flex items-center justify-center {selected ? 'bg-primary border-primary' : ''}">
+                    {#if selected}
+                      <span class='icon-[tabler--check] size-3 text-primary-content'></span>
+                    {/if}
+                  </span>
+                  <div class='flex-1 min-w-0'>
+                    <span>{opt.label}</span>
+                    {#if opt.description}
+                      <div class='text-xs text-base-content/50 truncate'>{opt.description}</div>
+                    {/if}
+                  </div>
+                {/snippet}
+              </Combobox.Item>
+            {/each}
+          {/if}
+        </Combobox.Content>
+      </Combobox.Portal>
+    </Combobox.Root>
+  {:else}
+    <!-- 单选模式 -->
+    <Combobox.Root
+      type='single'
+      items={filteredOptions}
+      inputValue={singleInputValue}
+      value={singleVal}
+      bind:open
+      {disabled}
+      onOpenChange={handleOpenChange}
+      onValueChange={handleSingleValueChange}
+    >
+      <div class='relative'>
+        <Combobox.Input
+          class="input w-full pr-8 {error ? 'input-error' : ''}"
+          {placeholder}
+          {disabled}
+          oninput={handleInput}
+          onfocus={() => {
+            if (!disabled)
+              open = true
+          }}
+        />
+        <Combobox.Trigger
+          class='absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle'
+        >
+          <span class="icon-[tabler--chevron-down] size-4 transition-transform {open ? 'rotate-180' : ''}"></span>
+        </Combobox.Trigger>
+      </div>
+
+      <Combobox.Portal>
+        <Combobox.Content
+          class='z-50 mt-1 max-h-60 w-[var(--bits-combobox-anchor-width)] overflow-y-auto rounded-lg border border-base-content/10 bg-base-100 p-1 shadow-lg'
+          sideOffset={4}
+        >
+          {#if filteredOptions.length === 0}
+            <div class='px-3 py-2 text-sm text-base-content/50'>
+              {uiM('combobox_no_match')}
+            </div>
+          {:else}
+            {#each filteredOptions as opt (opt.value)}
+              <Combobox.Item
+                value={opt.value}
+                label={opt.label}
+                disabled={opt.disabled}
+                class='flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-base-200 data-[highlighted]:bg-base-200 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+              >
+                {#snippet children({ selected })}
+                  <span class='size-4 shrink-0'>
+                    {#if selected}
+                      <span class='icon-[tabler--check] size-4 text-primary'></span>
+                    {/if}
+                  </span>
+                  <div class='flex-1 min-w-0'>
+                    <span>{opt.label}</span>
+                    {#if opt.description}
+                      <div class='text-xs text-base-content/50 truncate'>{opt.description}</div>
+                    {/if}
+                  </div>
+                {/snippet}
+              </Combobox.Item>
+            {/each}
+          {/if}
+        </Combobox.Content>
+      </Combobox.Portal>
+    </Combobox.Root>
+  {/if}
+
+  {#if error}
+    <span class='fieldset-label text-error'>{error}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,69 @@
+import { Combobox } from 'bits-ui';
+/** 选项定义 */
+interface Option {
+    /** 选项值 */
+    value: string;
+    /** 显示标签 */
+    label: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 描述文本（仅在多选模式下展示） */
+    description?: string;
+}
+interface Props {
+    /** 选项列表 */
+    options: Option[];
+    /** 选中值（双向绑定，单选为 string，多选为 string[]） */
+    value?: string | string[];
+    /** 是否多选模式 */
+    multiple?: boolean;
+    /** 输入框占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 错误消息 */
+    error?: string;
+    /** 表单标签 */
+    label?: string;
+    /** 自定义类名 */
+    class?: string;
+    /** 值变更回调 */
+    onchange?: (value: string | string[]) => void;
+}
+/**
+ * Combobox
+ * 可搜索下拉选择组件，基于 Bits UI headless + DaisyUI 样式。
+ * 支持单选和多选模式，带搜索过滤、键盘导航、无障碍支持。
+ * 多选模式下以标签形式展示已选项。
+ *
+ * @prop {Option[]} options - 选项列表
+ * @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
+ * @prop {boolean} multiple - 是否多选模式
+ * @prop {string} placeholder - 输入框占位符
+ * @prop {boolean} disabled - 是否禁用
+ * @prop {string} error - 错误消息
+ * @prop {string} label - 表单标签
+ * @prop {string} class - 自定义类名
+ * @prop {function} onchange - 值变更回调
+ *
+ * @example 单选
+ * <Combobox
+ *   options={[
+ *     { value: 'svelte', label: 'Svelte' },
+ *     { value: 'react', label: 'React' },
+ *   ]}
+ *   bind:value={framework}
+ *   placeholder="搜索框架..."
+ * />
+ *
+ * @example 多选
+ * <Combobox
+ *   options={skills}
+ *   bind:value={selectedSkills}
+ *   multiple
+ *   placeholder="搜索技能..."
+ * />
+ */
+declare const Combobox: import("svelte").Component<Props, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/compounds/Confirm.svelte

@@ -0,0 +1,90 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Confirm 组件
+  =============================================================================
+  确认对话框组件
+
+  使用 Svelte 5 Runes ($props, $state)
+  使用 primitives 组件：Button
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ConfirmProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+  import Button from '../primitives/Button.svelte'
+
+  let {
+    open = $bindable(false),
+    title,
+    message,
+    confirmText,
+    cancelText,
+    variant = 'warning',
+    loading = false,
+    class: className = '',
+    onconfirm,
+    oncancel,
+  }: ConfirmProps = $props()
+
+  /** 响应式 i18n 显示值 */
+  const displayTitle = $derived(title ?? uiM('confirm_title'))
+  const displayMessage = $derived(message ?? uiM('confirm_message'))
+  const displayConfirmText = $derived(confirmText ?? uiM('confirm_ok'))
+  const displayCancelText = $derived(cancelText ?? uiM('confirm_cancel'))
+
+  let modalElement: HTMLDialogElement
+
+  $effect(() => {
+    if (open) {
+      modalElement?.showModal()
+    }
+    else {
+      modalElement?.close()
+    }
+  })
+
+  async function handleConfirm() {
+    await onconfirm?.()
+    open = false
+  }
+
+  function handleCancel() {
+    oncancel?.()
+    open = false
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === modalElement) {
+      handleCancel()
+    }
+  }
+</script>
+
+<dialog
+  bind:this={modalElement}
+  class={cn('modal', className)}
+  onclick={handleBackdropClick}
+>
+  <div class='modal-box'>
+    <h3 class='font-bold text-lg'>{displayTitle}</h3>
+    <p class='py-4'>{displayMessage}</p>
+    <div class='modal-action'>
+      <Button
+        variant='ghost'
+        onclick={handleCancel}
+        disabled={loading}
+      >
+        {displayCancelText}
+      </Button>
+      <Button
+        variant={variant}
+        onclick={handleConfirm}
+        {loading}
+        disabled={loading}
+      >
+        {displayConfirmText}
+      </Button>
+    </div>
+  </div>
+</dialog>

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

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

package/dist/components/compounds/DataTable.svelte

@@ -0,0 +1,133 @@
+<!--
+  @component DataTable
+  通用数据表格组件，支持自定义列、操作按钮和加载状态。
+
+  @prop {T[]} data - 表格数据
+  @prop {Column<T>[]} columns - 列配置
+  @prop {keyof T} keyField - 用于唯一标识行的字段
+  @prop {Snippet<[T]>} actions - 操作按钮插槽
+  @prop {Snippet} empty - 空状态插槽
+  @prop {boolean} loading - 是否加载中
+  @prop {boolean} striped - 是否斑马纹
+  @prop {boolean} hoverable - 是否悬停高亮
+
+  @example
+  <DataTable
+    data={users}
+    columns={[
+      { key: 'name', label: '姓名' },
+      { key: 'email', label: '邮箱' },
+      { key: 'createdAt', label: '创建时间', render: (item) => formatDate(item.createdAt) }
+    ]}
+    keyField="id"
+  >
+    {#snippet actions(item)}
+      <Button size="xs" onclick={() => edit(item)}>编辑</Button>
+    {/snippet}
+  </DataTable>
+-->
+<script lang='ts' generics='T'>
+  import type { Snippet } from 'svelte'
+  import { uiM } from '../../messages.js'
+
+  const {
+    data,
+    columns,
+    keyField,
+    actions,
+    empty,
+    loading = false,
+    striped = true,
+    hoverable = true,
+    class: className = '',
+  }: {
+    data: T[]
+    columns: { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', render?: (item: T) => string }[]
+    keyField: keyof T
+    actions?: Snippet<[T]>
+    empty?: Snippet
+    loading?: boolean
+    striped?: boolean
+    hoverable?: boolean
+    class?: string
+  } = $props()
+
+  type Column = { key: keyof T | string, label: string, width?: string, align?: 'left' | 'center' | 'right', render?: (item: T) => string }
+
+  function getValue(item: T, col: Column): string {
+    if (col.render) {
+      return col.render(item)
+    }
+    const value = item[col.key as keyof T]
+    if (value === null || value === undefined) {
+      return '-'
+    }
+    // 自动格式化时间戳
+    if (typeof value === 'number' && col.key.toString().toLowerCase().includes('at')) {
+      return new Date(value).toLocaleString()
+    }
+    return String(value)
+  }
+
+  function getAlignClass(align?: string): string {
+    switch (align) {
+      case 'center': return 'text-center'
+      case 'right': return 'text-right'
+      default: return 'text-left'
+    }
+  }
+</script>
+
+<div class='overflow-x-auto {className}'>
+  <table class='table w-full text-[13px]' class:table-zebra={striped}>
+    <thead>
+      <tr class='text-xs text-base-content/50 border-b border-base-content/6'>
+        {#each columns as col}
+          <th
+            style={col.width ? `width: ${col.width}` : ''}
+            class='{getAlignClass(col.align)} font-medium'
+          >
+            {col.label}
+          </th>
+        {/each}
+        {#if actions}
+          <th class='w-24 text-center font-medium'>{uiM('data_table_actions')}</th>
+        {/if}
+      </tr>
+    </thead>
+    <tbody>
+      {#if loading}
+        <tr>
+          <td colspan={columns.length + (actions ? 1 : 0)} class='text-center py-8'>
+            <span class='loading loading-spinner loading-sm'></span>
+          </td>
+        </tr>
+      {:else if data.length === 0}
+        <tr>
+          <td colspan={columns.length + (actions ? 1 : 0)} class='text-center py-8 text-base-content/40'>
+            {#if empty}
+              {@render empty()}
+            {:else}
+              {uiM('data_table_empty')}
+            {/if}
+          </td>
+        </tr>
+      {:else}
+        {#each data as item (item[keyField])}
+          <tr class={hoverable ? 'hover:bg-base-content/3 transition-colors' : ''}>
+            {#each columns as col}
+              <td class={getAlignClass(col.align)}>{getValue(item, col)}</td>
+            {/each}
+            {#if actions}
+              <td>
+                <div class='flex items-center justify-center gap-1'>
+                  {@render actions(item)}
+                </div>
+              </td>
+            {/if}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,69 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        data: T[];
+        columns: {
+            key: keyof T | string;
+            label: string;
+            width?: string;
+            align?: "left" | "center" | "right";
+            render?: (item: T) => string;
+        }[];
+        keyField: keyof T;
+        actions?: Snippet<[T]>;
+        empty?: Snippet;
+        loading?: boolean;
+        striped?: boolean;
+        hoverable?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * DataTable
+ * 通用数据表格组件，支持自定义列、操作按钮和加载状态。
+ *
+ * @prop {T[]} data - 表格数据
+ * @prop {Column<T>[]} columns - 列配置
+ * @prop {keyof T} keyField - 用于唯一标识行的字段
+ * @prop {Snippet<[T]>} actions - 操作按钮插槽
+ * @prop {Snippet} empty - 空状态插槽
+ * @prop {boolean} loading - 是否加载中
+ * @prop {boolean} striped - 是否斑马纹
+ * @prop {boolean} hoverable - 是否悬停高亮
+ *
+ * @example
+ * <DataTable
+ *   data={users}
+ *   columns={[
+ *     { key: 'name', label: '姓名' },
+ *     { key: 'email', label: '邮箱' },
+ *     { key: 'createdAt', label: '创建时间', render: (item) => formatDate(item.createdAt) }
+ *   ]}
+ *   keyField="id"
+ * >
+ *   {#snippet actions(item)}
+ *     <Button size="xs" onclick={() => edit(item)}>编辑</Button>
+ *   {/snippet}
+ * </DataTable>
+ */
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
+export default DataTable;