@h-ai/ui 0.1.0-alpha5

package/dist/components/compounds/Alert.svelte

@@ -0,0 +1,67 @@
+<!--
+  @component Alert
+  警告框组件，使用 tabler icon 替代 emoji，更精致。
+-->
+<script lang='ts'>
+  import type { AlertProps } from '../../types.js'
+  import { uiM } from '../../messages.js'
+  import { cn, getAlertVariantClass } from '../../utils.js'
+  import IconButton from '../primitives/IconButton.svelte'
+
+  const {
+    variant = 'info',
+    title = '',
+    dismissible = false,
+    class: className = '',
+    onclose,
+    children,
+  }: AlertProps = $props()
+
+  let visible = $state(true)
+
+  const alertClass = $derived(
+    cn(
+      'alert',
+      getAlertVariantClass(variant),
+      className,
+    ),
+  )
+
+  // 图标映射：使用 tabler icon 类
+  const iconMap: Record<string, string> = {
+    info: 'icon-[tabler--info-circle]',
+    success: 'icon-[tabler--circle-check]',
+    warning: 'icon-[tabler--alert-triangle]',
+    error: 'icon-[tabler--circle-x]',
+  }
+
+  function handleClose() {
+    visible = false
+    onclose?.()
+  }
+</script>
+
+{#if visible}
+  <div class={alertClass} role='alert'>
+    <span class='{iconMap[variant] ?? iconMap.info} size-5 shrink-0'></span>
+
+    <div>
+      {#if title}
+        <h3 class='font-semibold text-sm'>{title}</h3>
+      {/if}
+      {#if children}
+        <div class='text-sm'>
+          {@render children()}
+        </div>
+      {/if}
+    </div>
+
+    {#if dismissible}
+      <IconButton size='sm' variant='ghost' label={uiM('common_close')} onclick={handleClose}>
+        {#snippet children()}
+          <span class='icon-[tabler--x] size-4'></span>
+        {/snippet}
+      </IconButton>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,8 @@
+import type { AlertProps } from '../../types.js';
+/**
+ * Alert
+ * 警告框组件，使用 tabler icon 替代 emoji，更精致。
+ */
+declare const Alert: import("svelte").Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/compounds/AppBar.svelte

@@ -0,0 +1,77 @@
+<!--
+  @h-ai/ui — AppBar（顶部应用栏，支持安全区域）
+
+  用法：
+  <AppBar title="首页">
+    {#snippet leading()}<BackButton />{/snippet}
+    {#snippet trailing()}<Avatar />{/snippet}
+  </AppBar>
+-->
+<script lang='ts'>
+  import type { Snippet } from 'svelte'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 标题文本 */
+    title?: string
+    /** 是否适配顶部安全区域 */
+    safeArea?: boolean
+    /** 是否固定在顶部 */
+    fixed?: boolean
+    /** 额外 CSS 类 */
+    class?: string
+    /** 左侧内容（返回按钮等） */
+    leading?: Snippet
+    /** 右侧内容（操作按钮等） */
+    trailing?: Snippet
+    /** 自定义标题区域 */
+    children?: Snippet
+  }
+
+  const {
+    title,
+    safeArea = true,
+    fixed = true,
+    class: className,
+    leading,
+    trailing,
+    children,
+  }: Props = $props()
+</script>
+
+<header
+  class={cn(
+    'flex items-center h-14 px-4 bg-base-100 border-b border-base-200',
+    safeArea && 'hai-safe-top',
+    fixed && 'fixed top-0 left-0 right-0 z-40',
+    className,
+  )}
+>
+  <!-- 左侧 -->
+  <div class='flex items-center min-w-[48px]'>
+    {#if leading}
+      {@render leading()}
+    {/if}
+  </div>
+
+  <!-- 标题区域 -->
+  <div class='flex-1 text-center font-semibold text-base truncate'>
+    {#if children}
+      {@render children()}
+    {:else if title}
+      {title}
+    {/if}
+  </div>
+
+  <!-- 右侧 -->
+  <div class='flex items-center min-w-[48px] justify-end'>
+    {#if trailing}
+      {@render trailing()}
+    {/if}
+  </div>
+</header>
+
+<!-- 占位区域（fixed 模式下避免内容被遮挡） -->
+{#if fixed}
+  <div class={cn('h-14', safeArea && 'hai-safe-top')}></div>
+{/if}

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 标题文本 */
+    title?: string;
+    /** 是否适配顶部安全区域 */
+    safeArea?: boolean;
+    /** 是否固定在顶部 */
+    fixed?: boolean;
+    /** 额外 CSS 类 */
+    class?: string;
+    /** 左侧内容（返回按钮等） */
+    leading?: Snippet;
+    /** 右侧内容（操作按钮等） */
+    trailing?: Snippet;
+    /** 自定义标题区域 */
+    children?: Snippet;
+}
+declare const AppBar: import("svelte").Component<Props, {}, "">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

package/dist/components/compounds/BottomNav.svelte

@@ -0,0 +1,75 @@
+<!--
+  @h-ai/ui — BottomNav（底部导航栏）
+
+  用法：
+  <BottomNav items={navItems} active="home" onchange={(id) => goto(`/${id}`)} />
+-->
+<script lang='ts'>
+  import type { BottomNavItem } from './bottom-nav-types.js'
+  import { cn } from '../../utils.js'
+
+  // eslint-disable-next-line no-import-assign -- type re-export
+  export type { BottomNavItem }
+
+  interface Props {
+    /** 导航项列表 */
+    items: BottomNavItem[]
+    /** 当前激活项 ID */
+    active?: string
+    /** 切换回调 */
+    onchange?: (id: string) => void
+    /** 是否适配底部安全区域 */
+    safeArea?: boolean
+    /** 额外 CSS 类 */
+    class?: string
+  }
+
+  const {
+    items,
+    active,
+    onchange,
+    safeArea = true,
+    class: className,
+  }: Props = $props()
+</script>
+
+<nav
+  class={cn(
+    'fixed bottom-0 left-0 right-0 bg-base-100 border-t border-base-200 z-40',
+    safeArea && 'hai-safe-bottom',
+    className,
+  )}
+>
+  <div class='flex items-center justify-around h-14'>
+    {#each items as item (item.id)}
+      <button
+        type='button'
+        class={cn(
+          'flex flex-col items-center justify-center flex-1 h-full relative transition-colors',
+          'hai-no-select',
+          item.id === active ? 'text-primary' : 'text-base-content/60',
+        )}
+        onclick={() => onchange?.(item.id)}
+      >
+        <!-- 图标 -->
+        <div class='relative w-6 h-6 mb-0.5'>
+          {#if item.icon}
+            {@render item.icon()}
+          {:else if item.iconClass}
+            <span class='{item.iconClass} w-6 h-6'></span>
+          {/if}
+          {#if item.badge && item.badge > 0}
+            <span class='absolute -top-1 -right-2 badge badge-error badge-xs text-[10px] min-w-4 h-4'>
+              {item.badge > 99 ? '99+' : item.badge}
+            </span>
+          {/if}
+        </div>
+        <!-- 文本 -->
+        <span class='text-xs leading-tight'>{item.label}</span>
+      </button>
+    {/each}
+  </div>
+</nav>
+
+<!-- 占位（避免内容被遮挡） -->
+<div class={cn('h-14', safeArea && 'hai-safe-bottom')}></div>

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

@@ -0,0 +1,18 @@
+import type { BottomNavItem } from './bottom-nav-types.js';
+interface Props {
+    /** 导航项列表 */
+    items: BottomNavItem[];
+    /** 当前激活项 ID */
+    active?: string;
+    /** 切换回调 */
+    onchange?: (id: string) => void;
+    /** 是否适配底部安全区域 */
+    safeArea?: boolean;
+    /** 额外 CSS 类 */
+    class?: string;
+}
+declare const BottomNav: import("svelte").Component<Props, {
+    BottomNavItem: typeof BottomNavItem;
+}, "">;
+type BottomNav = ReturnType<typeof BottomNav>;
+export default BottomNav;

package/dist/components/compounds/Breadcrumb.svelte

@@ -0,0 +1,49 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Breadcrumb 组件
+  =============================================================================
+  面包屑导航组件
+
+  使用 Svelte 5 Runes ($props)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { BreadcrumbProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    items,
+    class: className = '',
+  }: BreadcrumbProps = $props()
+
+  const breadcrumbClass = $derived(
+    cn(
+      'breadcrumbs text-sm',
+      className,
+    ),
+  )
+</script>
+
+<div class={breadcrumbClass}>
+  <ul>
+    {#each items as item, index}
+      <li>
+        {#if item.href && index < items.length - 1}
+          <a href={item.href}>
+            {#if item.icon}
+              <span class='mr-1'>{item.icon}</span>
+            {/if}
+            {item.label}
+          </a>
+        {:else}
+          <span>
+            {#if item.icon}
+              <span class='mr-1'>{item.icon}</span>
+            {/if}
+            {item.label}
+          </span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+</div>

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

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

package/dist/components/compounds/Calendar.svelte

@@ -0,0 +1,116 @@
+<!--
+  @component Calendar
+  日历组件，基于 Bits UI headless + DaisyUI 样式。
+  支持单选/多选、日期范围限制、自定义不可用日期。
+
+  @prop {DateValue} value - 选中日期（双向绑定）
+  @prop {DateValue} minValue - 最小可选日期
+  @prop {DateValue} maxValue - 最大可选日期
+  @prop {number} weekStartsOn - 周起始日（0=周日，1=周一）
+  @prop {function} isDateUnavailable - 自定义不可用日期判断函数
+  @prop {function} onchange - 日期变更回调
+
+  @example
+  ```svelte
+  <script>
+    import { CalendarDate } from '@internationalized/date'
+    let date = $state(new CalendarDate(2024, 1, 15))
+  </script>
+  <Calendar bind:value={date} />
+  ```
+-->
+<script lang='ts'>
+  import type { DateValue } from '@internationalized/date'
+  import { Calendar as BitsCalendar } from 'bits-ui'
+
+  interface Props {
+    /** 选中日期（双向绑定） */
+    value?: DateValue
+    /** 占位日期（控制日历显示月份） */
+    placeholder?: DateValue
+    /** 最小可选日期 */
+    minValue?: DateValue
+    /** 最大可选日期 */
+    maxValue?: DateValue
+    /** 周起始日（0=周日，1=周一，默认 1） */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+    /** 自定义不可用日期判断函数 */
+    isDateUnavailable?: (date: DateValue) => boolean
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 是否只读 */
+    readonly?: boolean
+    /** 自定义类名 */
+    class?: string
+    /** 日期变更回调 */
+    onchange?: (value: DateValue | undefined) => void
+  }
+
+  let {
+    value = $bindable(),
+    placeholder = $bindable(),
+    minValue,
+    maxValue,
+    weekStartsOn = 1,
+    isDateUnavailable,
+    disabled = false,
+    readonly: isReadonly = false,
+    class: className = '',
+    onchange,
+  }: Props = $props()
+</script>
+
+<div class={className}>
+  <BitsCalendar.Root
+    type='single'
+    bind:value
+    bind:placeholder
+    {minValue}
+    {maxValue}
+    {weekStartsOn}
+    {isDateUnavailable}
+    {disabled}
+    readonly={isReadonly}
+    onValueChange={v => onchange?.(v)}
+  >
+    {#snippet children({ months, weekdays })}
+      <BitsCalendar.Header class='flex items-center justify-between px-1 pb-3'>
+        <BitsCalendar.PrevButton class='btn btn-ghost btn-sm btn-circle'>
+          <span class='icon-[tabler--chevron-left] size-4'></span>
+        </BitsCalendar.PrevButton>
+        <BitsCalendar.Heading class='text-sm font-semibold' />
+        <BitsCalendar.NextButton class='btn btn-ghost btn-sm btn-circle'>
+          <span class='icon-[tabler--chevron-right] size-4'></span>
+        </BitsCalendar.NextButton>
+      </BitsCalendar.Header>
+
+      {#each months as month}
+        <BitsCalendar.Grid class='w-full border-collapse'>
+          <BitsCalendar.GridHead>
+            <BitsCalendar.GridRow class='flex w-full'>
+              {#each weekdays as day}
+                <BitsCalendar.HeadCell class='w-9 text-center text-xs font-medium text-base-content/50'>
+                  {day}
+                </BitsCalendar.HeadCell>
+              {/each}
+            </BitsCalendar.GridRow>
+          </BitsCalendar.GridHead>
+
+          <BitsCalendar.GridBody>
+            {#each month.weeks as weekDates}
+              <BitsCalendar.GridRow class='flex w-full'>
+                {#each weekDates as date}
+                  <BitsCalendar.Cell {date} month={month.value} class='p-0'>
+                    <BitsCalendar.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}
+                    </BitsCalendar.Day>
+                  </BitsCalendar.Cell>
+                {/each}
+              </BitsCalendar.GridRow>
+            {/each}
+          </BitsCalendar.GridBody>
+        </BitsCalendar.Grid>
+      {/each}
+    {/snippet}
+  </BitsCalendar.Root>
+</div>

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

@@ -0,0 +1,47 @@
+import type { DateValue } from '@internationalized/date';
+interface Props {
+    /** 选中日期（双向绑定） */
+    value?: DateValue;
+    /** 占位日期（控制日历显示月份） */
+    placeholder?: DateValue;
+    /** 最小可选日期 */
+    minValue?: DateValue;
+    /** 最大可选日期 */
+    maxValue?: DateValue;
+    /** 周起始日（0=周日，1=周一，默认 1） */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** 自定义不可用日期判断函数 */
+    isDateUnavailable?: (date: DateValue) => boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 自定义类名 */
+    class?: string;
+    /** 日期变更回调 */
+    onchange?: (value: DateValue | undefined) => void;
+}
+/**
+ * Calendar
+ * 日历组件，基于 Bits UI headless + DaisyUI 样式。
+ * 支持单选/多选、日期范围限制、自定义不可用日期。
+ *
+ * @prop {DateValue} value - 选中日期（双向绑定）
+ * @prop {DateValue} minValue - 最小可选日期
+ * @prop {DateValue} maxValue - 最大可选日期
+ * @prop {number} weekStartsOn - 周起始日（0=周日，1=周一）
+ * @prop {function} isDateUnavailable - 自定义不可用日期判断函数
+ * @prop {function} onchange - 日期变更回调
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { CalendarDate } from '@internationalized/date'
+ *   let date = $state(new CalendarDate(2024, 1, 15))
+ * </script>
+ * <Calendar bind:value={date} />
+ * ```
+ */
+declare const Calendar: import("svelte").Component<Props, {}, "value" | "placeholder">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/compounds/Card.svelte

@@ -0,0 +1,77 @@
+<!--
+  @component Card
+  卡片组件，默认使用 border 而非 shadow，更现代克制。
+-->
+<script lang='ts'>
+  import type { CardProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    title = '',
+    bordered = false,
+    shadow = 'sm',
+    padding = 'md',
+    class: className = '',
+    header,
+    footer,
+    children,
+  }: CardProps = $props()
+
+  const paddingMap = {
+    'none': '',
+    'xs': 'p-2',
+    'sm': 'p-3',
+    'md': 'p-4',
+    'lg': 'p-6',
+    'xl': 'p-8',
+    '2xl': 'p-10',
+    '3xl': 'p-12',
+    '4xl': 'p-16',
+  }
+
+  const shadowMap = {
+    true: 'shadow-md',
+    false: '',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+  }
+
+  const cardClass = $derived(
+    cn(
+      'card bg-base-100 rounded-xl border border-base-content/6',
+      bordered && 'border-base-300',
+      typeof shadow === 'boolean' ? shadowMap[String(shadow) as 'true' | 'false'] : shadowMap[shadow],
+      className,
+    ),
+  )
+
+  const bodyClass = $derived(
+    cn(
+      'card-body',
+      paddingMap[padding],
+    ),
+  )
+</script>
+
+<div class={cardClass}>
+  <div class={bodyClass}>
+    {#if header}
+      <div class='card-title text-sm font-semibold'>
+        {@render header()}
+      </div>
+    {:else if title}
+      <h2 class='card-title text-sm font-semibold'>{title}</h2>
+    {/if}
+
+    {#if children}
+      {@render children()}
+    {/if}
+
+    {#if footer}
+      <div class='card-actions justify-end mt-4'>
+        {@render footer()}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,8 @@
+import type { CardProps } from '../../types.js';
+/**
+ * Card
+ * 卡片组件，默认使用 border 而非 shadow，更现代克制。
+ */
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;