@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/DatePicker.svelte

@@ -0,0 +1,135 @@
+<!--
+  @component DatePicker
+  日期选择器组件，基于 Bits UI headless + DaisyUI 样式。
+  包含日期输入框 + 弹出日历，支持键盘分段输入。
+
+  @prop {DateValue} value - 选中日期（双向绑定）
+  @prop {DateValue} minValue - 最小可选日期
+  @prop {DateValue} maxValue - 最大可选日期
+  @prop {string} placeholder - 输入框占位文本
+  @prop {boolean} disabled - 是否禁用
+  @prop {string} error - 错误消息
+  @prop {function} onchange - 日期变更回调
+
+  @example
+  ```svelte
+  <script>
+    import { CalendarDate } from '@internationalized/date'
+    let date = $state(new CalendarDate(2024, 6, 15))
+  </script>
+  <DatePicker bind:value={date} />
+  ```
+-->
+<script lang='ts'>
+  import type { DateValue } from '@internationalized/date'
+  import { DatePicker as BitsDatePicker } from 'bits-ui'
+
+  interface Props {
+    /** 选中日期（双向绑定） */
+    value?: DateValue
+    /** 最小可选日期 */
+    minValue?: DateValue
+    /** 最大可选日期 */
+    maxValue?: DateValue
+    /** 周起始日（0=周日，1=周一，默认 1） */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    /** 自定义不可用日期判断函数 */
+    isDateUnavailable?: (date: DateValue) => boolean
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 错误消息 */
+    error?: string
+    /** 自定义类名 */
+    class?: string
+    /** 日期变更回调 */
+    onchange?: (value: DateValue | undefined) => void
+  }
+
+  let {
+    value = $bindable(),
+    minValue,
+    maxValue,
+    weekStartsOn = 1,
+    isDateUnavailable,
+    disabled = false,
+    error,
+    class: className = '',
+    onchange,
+  }: Props = $props()
+</script>
+
+<div class='fieldset w-full {className}'>
+  <BitsDatePicker.Root
+    bind:value
+    {minValue}
+    {maxValue}
+    {weekStartsOn}
+    {isDateUnavailable}
+    {disabled}
+    onValueChange={v => onchange?.(v)}
+  >
+    <BitsDatePicker.Input class="input flex items-center gap-0.5 pr-2 {error ? 'input-error' : ''}">
+      {#snippet children({ segments })}
+        {#each segments as { part, value: segValue }}
+          <BitsDatePicker.Segment
+            {part}
+            class='rounded px-0.5 py-0.5 text-sm tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
+          >
+            {segValue}
+          </BitsDatePicker.Segment>
+        {/each}
+        <BitsDatePicker.Trigger class='ml-auto btn btn-ghost btn-xs btn-circle'>
+          <span class='icon-[tabler--calendar] size-4'></span>
+        </BitsDatePicker.Trigger>
+      {/snippet}
+    </BitsDatePicker.Input>
+
+    <BitsDatePicker.Content class='z-50 mt-1 rounded-xl border border-base-content/10 bg-base-100 p-3 shadow-lg' sideOffset={4}>
+      <BitsDatePicker.Calendar>
+        {#snippet children({ months, weekdays })}
+          <BitsDatePicker.Header class='flex items-center justify-between px-1 pb-3'>
+            <BitsDatePicker.PrevButton class='btn btn-ghost btn-sm btn-circle'>
+              <span class='icon-[tabler--chevron-left] size-4'></span>
+            </BitsDatePicker.PrevButton>
+            <BitsDatePicker.Heading class='text-sm font-semibold' />
+            <BitsDatePicker.NextButton class='btn btn-ghost btn-sm btn-circle'>
+              <span class='icon-[tabler--chevron-right] size-4'></span>
+            </BitsDatePicker.NextButton>
+          </BitsDatePicker.Header>
+
+          {#each months as month}
+            <BitsDatePicker.Grid class='w-full border-collapse'>
+              <BitsDatePicker.GridHead>
+                <BitsDatePicker.GridRow class='flex w-full'>
+                  {#each weekdays as day}
+                    <BitsDatePicker.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
+                      {day}
+                    </BitsDatePicker.HeadCell>
+                  {/each}
+                </BitsDatePicker.GridRow>
+              </BitsDatePicker.GridHead>
+
+              <BitsDatePicker.GridBody>
+                {#each month.weeks as weekDates}
+                  <BitsDatePicker.GridRow class='flex w-full'>
+                    {#each weekDates as date}
+                      <BitsDatePicker.Cell {date} month={month.value} class='p-0'>
+                        <BitsDatePicker.Day class='inline-flex size-9 items-center justify-center rounded-lg text-sm transition-colors hover:bg-base-200 data-[selected]:bg-primary data-[selected]:text-primary-content data-[disabled]:opacity-30 data-[unavailable]:line-through data-[unavailable]:opacity-30 data-[outside-month]:text-base-content/30'>
+                          {date.day}
+                        </BitsDatePicker.Day>
+                      </BitsDatePicker.Cell>
+                    {/each}
+                  </BitsDatePicker.GridRow>
+                {/each}
+              </BitsDatePicker.GridBody>
+            </BitsDatePicker.Grid>
+          {/each}
+        {/snippet}
+      </BitsDatePicker.Calendar>
+    </BitsDatePicker.Content>
+  </BitsDatePicker.Root>
+
+  {#if error}
+    <span class='fieldset-label text-error'>{error}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,46 @@
+import type { DateValue } from '@internationalized/date';
+interface Props {
+    /** 选中日期（双向绑定） */
+    value?: DateValue;
+    /** 最小可选日期 */
+    minValue?: DateValue;
+    /** 最大可选日期 */
+    maxValue?: DateValue;
+    /** 周起始日（0=周日，1=周一，默认 1） */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** 自定义不可用日期判断函数 */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 错误消息 */
+    error?: string;
+    /** 自定义类名 */
+    class?: string;
+    /** 日期变更回调 */
+    onchange?: (value: DateValue | undefined) => void;
+}
+/**
+ * DatePicker
+ * 日期选择器组件，基于 Bits UI headless + DaisyUI 样式。
+ * 包含日期输入框 + 弹出日历，支持键盘分段输入。
+ *
+ * @prop {DateValue} value - 选中日期（双向绑定）
+ * @prop {DateValue} minValue - 最小可选日期
+ * @prop {DateValue} maxValue - 最大可选日期
+ * @prop {string} placeholder - 输入框占位文本
+ * @prop {boolean} disabled - 是否禁用
+ * @prop {string} error - 错误消息
+ * @prop {function} onchange - 日期变更回调
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { CalendarDate } from '@internationalized/date'
+ *   let date = $state(new CalendarDate(2024, 6, 15))
+ * </script>
+ * <DatePicker bind:value={date} />
+ * ```
+ */
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/compounds/Drawer.svelte

@@ -0,0 +1,113 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Drawer 组件
+  =============================================================================
+  抽屉组件
+
+  使用 Svelte 5 Runes ($props, $derived, $effect, $bindable)
+  使用 primitives 组件：IconButton
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { DrawerProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn, generateId } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+  import ToggleCheckbox from '../primitives/ToggleCheckbox.svelte'
+
+  let {
+    open = $bindable(false),
+    title = '',
+    position = 'right',
+    size = 'md',
+    closeOnBackdrop = true,
+    showClose = true,
+    class: className = '',
+    onclose,
+    children,
+  }: DrawerProps = $props()
+
+  const id = generateId('drawer')
+
+  const sizeMap = {
+    'xs': 'w-60',
+    'sm': 'w-72',
+    'md': 'w-80',
+    'lg': 'w-96',
+    'xl': 'w-[30rem]',
+    '2xl': 'w-[34rem]',
+    '3xl': 'w-[38rem]',
+    '4xl': 'w-[42rem]',
+  }
+
+  const drawerClass = $derived(
+    cn(
+      'drawer',
+      position === 'right' && 'drawer-end',
+    ),
+  )
+
+  const sideClass = $derived(
+    cn(
+      'drawer-side z-50',
+    ),
+  )
+
+  const contentClass = $derived(
+    cn(
+      'menu bg-base-200 text-base-content min-h-full p-4',
+      sizeMap[size],
+      className,
+    ),
+  )
+
+  function handleClose() {
+    open = false
+    onclose?.()
+  }
+
+  function handleBackdropClick() {
+    if (closeOnBackdrop) {
+      handleClose()
+    }
+  }
+</script>
+
+<div class={drawerClass}>
+  <ToggleCheckbox {id} class='drawer-toggle' bind:checked={open} />
+
+  <div class={sideClass}>
+    <div
+      role='button'
+      tabindex='0'
+      aria-label={uiM('drawer_close')}
+      class='drawer-overlay'
+      onclick={handleBackdropClick}
+      onkeydown={e => e.key === 'Enter' && handleBackdropClick()}
+    ></div>
+
+    <div class={contentClass}>
+      <div class='flex items-center justify-between mb-4'>
+        {#if title}
+          <h3 class='text-lg font-bold'>{title}</h3>
+        {:else}
+          <div></div>
+        {/if}
+
+        {#if showClose}
+          <IconButton size='sm' variant='ghost' label={uiM('common_close')} onclick={handleClose}>
+            {#snippet children()}
+              <svg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12' />
+              </svg>
+            {/snippet}
+          </IconButton>
+        {/if}
+      </div>
+
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</div>

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

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

package/dist/components/compounds/Dropdown.svelte

@@ -0,0 +1,91 @@
+<!--
+  @component Dropdown
+  下拉菜单组件，支持 click/hover 触发。
+-->
+<script lang='ts'>
+  import type { DropdownProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+  import BareButton from '../primitives/BareButton.svelte'
+
+  const {
+    items,
+    trigger = 'click',
+    position = 'bottom',
+    align = 'start',
+    class: className = '',
+    onselect,
+    children,
+  }: DropdownProps = $props()
+
+  let isOpen = $state(false)
+
+  const positionMap = {
+    top: 'dropdown-top',
+    right: 'dropdown-right',
+    bottom: 'dropdown-bottom',
+    left: 'dropdown-left',
+  }
+
+  const alignMap = {
+    start: 'dropdown-start',
+    center: '',
+    end: 'dropdown-end',
+  }
+
+  const dropdownClass = $derived(
+    cn(
+      'dropdown',
+      positionMap[position],
+      alignMap[align],
+      trigger === 'hover' && 'dropdown-hover',
+      isOpen && 'dropdown-open',
+      className,
+    ),
+  )
+
+  function handleSelect(key: string) {
+    isOpen = false
+    onselect?.(key)
+  }
+
+  function toggleDropdown() {
+    if (trigger === 'click') {
+      isOpen = !isOpen
+    }
+  }
+</script>
+
+<div class={dropdownClass}>
+  <BareButton
+    tabindex={0}
+    role='button'
+    onclick={toggleDropdown}
+    onkeydown={e => e.key === 'Enter' && toggleDropdown()}
+  >
+    {#if children}
+      {@render children()}
+    {/if}
+  </BareButton>
+
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <ul tabindex='0' class='dropdown-content menu bg-base-100 rounded-xl z-[1] w-52 p-1.5 shadow-lg border border-base-content/6 animate-[hai-scale-in_0.15s_cubic-bezier(0.16,1,0.3,1)]'>
+    {#each items as item}
+      {#if item.divider}
+        <li class='divider'></li>
+      {:else}
+        <li>
+          <BareButton
+            class={cn('w-full text-left text-[13px] rounded-lg', item.disabled && 'disabled')}
+            disabled={item.disabled}
+            onclick={() => handleSelect(item.key)}
+          >
+            {#if item.icon}
+              <span>{item.icon}</span>
+            {/if}
+            {item.label}
+          </BareButton>
+        </li>
+      {/if}
+    {/each}
+  </ul>
+</div>

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

@@ -0,0 +1,8 @@
+import type { DropdownProps } from '../../types.js';
+/**
+ * Dropdown
+ * 下拉菜单组件，支持 click/hover 触发。
+ */
+declare const Dropdown: import("svelte").Component<DropdownProps, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/components/compounds/Empty.svelte

@@ -0,0 +1,83 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Empty 组件
+  =============================================================================
+  空状态展示组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { EmptyProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    title,
+    description = '',
+    icon = 'inbox',
+    size = 'md',
+    class: className = '',
+    action,
+    children,
+  }: EmptyProps = $props()
+
+  const displayTitle = $derived(title ?? uiM('empty_title'))
+
+  const containerClass = $derived(
+    cn(
+      'flex flex-col items-center justify-center py-8 text-center',
+      size === 'sm' && 'py-4',
+      size === 'lg' && 'py-12',
+      className,
+    ),
+  )
+
+  const iconSize = $derived(
+    size === 'sm' ? 'w-12 h-12' : size === 'lg' ? 'w-24 h-24' : 'w-16 h-16',
+  )
+
+  const titleSize = $derived(
+    size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-xl' : 'text-base',
+  )
+</script>
+
+<div class={containerClass}>
+  <!-- 图标区域 -->
+  <div class='text-base-content/30 mb-4 {iconSize}'>
+    {#if children}
+      {@render children()}
+    {:else if icon === 'inbox'}
+      <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='M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4' />
+      </svg>
+    {:else if icon === 'search'}
+      <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='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' />
+      </svg>
+    {:else if icon === 'file'}
+      <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='M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z' />
+      </svg>
+    {:else if icon === '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='M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z' />
+      </svg>
+    {/if}
+  </div>
+
+  <!-- 标题 -->
+  <h3 class='font-medium text-base-content/70 {titleSize}'>{displayTitle}</h3>
+
+  <!-- 描述 -->
+  {#if description}
+    <p class='mt-1 text-sm text-base-content/50 max-w-sm'>{description}</p>
+  {/if}
+
+  <!-- 操作按钮插槽 -->
+  {#if action}
+    <div class='mt-4'>
+      {@render action()}
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/compounds/Form.svelte

@@ -0,0 +1,96 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Form 组件
+  =============================================================================
+  表单容器组件，提供统一的表单提交、验证和重置功能
+
+  使用 Svelte 5 Runes ($props, $state)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { FormProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    class: className = '',
+    loading = false,
+    disabled = false,
+    onsubmit,
+    onreset,
+    onerror,
+    children,
+  }: FormProps = $props()
+
+  let formElement: HTMLFormElement
+
+  const formClass = $derived(
+    cn(
+      'form',
+      loading && 'opacity-70 pointer-events-none',
+      className,
+    ),
+  )
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+    if (loading || disabled)
+      return
+
+    try {
+      const formData = new FormData(formElement)
+      const data: Record<string, unknown> = {}
+
+      for (const [key, value] of formData.entries()) {
+        // 处理多值字段（如 checkbox 组）
+        if (data[key] !== undefined) {
+          if (Array.isArray(data[key])) {
+            (data[key] as unknown[]).push(value)
+          }
+          else {
+            data[key] = [data[key], value]
+          }
+        }
+        else {
+          data[key] = value
+        }
+      }
+
+      await onsubmit?.(data)
+    }
+    catch (error) {
+      onerror?.(error)
+    }
+  }
+
+  function handleReset(e: Event) {
+    e.preventDefault()
+    formElement?.reset()
+    onreset?.()
+  }
+
+  /** 重置表单 */
+  export function reset() {
+    formElement?.reset()
+  }
+
+  /** 获取表单数据 */
+  export function getData(): Record<string, unknown> {
+    const formData = new FormData(formElement)
+    const data: Record<string, unknown> = {}
+    for (const [key, value] of formData.entries()) {
+      data[key] = value
+    }
+    return data
+  }
+</script>
+
+<form
+  bind:this={formElement}
+  class={formClass}
+  onsubmit={handleSubmit}
+  onreset={handleReset}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</form>

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

@@ -0,0 +1,7 @@
+import type { FormProps } from '../../types.js';
+declare const Form: import("svelte").Component<FormProps, {
+    reset: () => void;
+    getData: () => Record<string, unknown>;
+}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/compounds/FormField.svelte

@@ -0,0 +1,56 @@
+<!--
+  =============================================================================
+  @h-ai/ui - FormField 组件
+  =============================================================================
+  表单字段包装器，统一 label/error/hint 展示
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { FormFieldProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    label = '',
+    error = '',
+    hint = '',
+    required = false,
+    class: className = '',
+    children,
+  }: FormFieldProps = $props()
+
+  const fieldClass = $derived(
+    cn(
+      'fieldset w-full',
+      className,
+    ),
+  )
+</script>
+
+<div class={fieldClass}>
+  {#if label}
+    <legend class='fieldset-legend'>
+      {label}
+      {#if required}
+        <span class='text-error'>*</span>
+      {/if}
+    </legend>
+  {/if}
+
+  <div class='field-content'>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if error || hint}
+    <div>
+      {#if error}
+        <span class='fieldset-label text-error'>{error}</span>
+      {:else if hint}
+        <span class='fieldset-label text-base-content/60'>{hint}</span>
+      {/if}
+    </div>
+  {/if}
+</div>

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

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