@h-ai/ui 0.1.0-alpha5

package/dist/components/primitives/Avatar.svelte

@@ -0,0 +1,102 @@
+<!--
+  @component Avatar
+  头像组件，支持图片、名字首字母 fallback
+-->
+<script lang='ts'>
+  import type { AvatarProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    src = '',
+    alt = '',
+    name = '',
+    size = 'md',
+    shape = 'circle',
+    class: className = '',
+  }: AvatarProps = $props()
+
+  const sizeMap = {
+    'xs': 'w-6 h-6',
+    'sm': 'w-8 h-8',
+    'md': 'w-10 h-10',
+    'lg': 'w-14 h-14',
+    'xl': 'w-20 h-20',
+    '2xl': 'w-24 h-24',
+    '3xl': 'w-28 h-28',
+    '4xl': 'w-32 h-32',
+  }
+
+  const textSizeMap = {
+    'xs': 'text-2xs',
+    'sm': 'text-xs',
+    'md': 'text-sm',
+    'lg': 'text-lg',
+    'xl': 'text-2xl',
+    '2xl': 'text-3xl',
+    '3xl': 'text-4xl',
+    '4xl': 'text-5xl',
+  }
+
+  /* 获取名称首字母 */
+  const initials = $derived(() => {
+    if (!name)
+      return ''
+    const parts = name.trim().split(/\s+/)
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[1][0]).toUpperCase()
+    }
+    return name.slice(0, 2).toUpperCase()
+  })
+
+  /* 根据名称 hash 生成渐变色 */
+  const gradientPairs = [
+    ['from-blue-400 to-indigo-500', 'text-white'],
+    ['from-emerald-400 to-teal-500', 'text-white'],
+    ['from-amber-400 to-orange-500', 'text-white'],
+    ['from-rose-400 to-pink-500', 'text-white'],
+    ['from-violet-400 to-purple-500', 'text-white'],
+    ['from-cyan-400 to-sky-500', 'text-white'],
+  ] as const
+
+  const colorPair = $derived(() => {
+    if (!name)
+      return gradientPairs[0]
+    const hash = name.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0)
+    return gradientPairs[hash % gradientPairs.length]
+  })
+
+  const sizeValue = $derived(typeof size === 'number' ? `${size}px` : undefined)
+
+  const containerClass = $derived(
+    cn(
+      'avatar',
+      !src && 'placeholder',
+    ),
+  )
+
+  const innerClass = $derived(
+    cn(
+      'flex items-center justify-center font-semibold',
+      typeof size === 'string' && sizeMap[size],
+      shape === 'circle' ? 'rounded-full' : 'rounded-lg',
+      !src && `bg-gradient-to-br ${colorPair()[0]} ${colorPair()[1]}`,
+      className,
+    ),
+  )
+</script>
+
+<div class={containerClass}>
+  <div
+    class={innerClass}
+    style:width={sizeValue}
+    style:height={sizeValue}
+  >
+    {#if src}
+      <img {src} {alt} />
+    {:else}
+      <span class={typeof size === 'string' ? textSizeMap[size] : 'text-lg'}>
+        {initials()}
+      </span>
+    {/if}
+  </div>
+</div>

package/dist/components/primitives/Avatar.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { AvatarProps } from '../../types.js';
+/**
+ * Avatar
+ * 头像组件，支持图片、名字首字母 fallback
+ */
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/primitives/Badge.svelte

@@ -0,0 +1,33 @@
+<!--
+  @component Badge
+  徽章组件，支持多种变体与尺寸
+-->
+<script lang='ts'>
+  import type { BadgeProps } from '../../types.js'
+  import { cn, getBadgeSizeClass, getBadgeVariantClass } from '../../utils.js'
+
+  const {
+    variant = 'default',
+    size = 'md',
+    outline = false,
+    class: className = '',
+    children,
+  }: BadgeProps = $props()
+
+  const badgeClass = $derived(
+    cn(
+      'badge',
+      getBadgeVariantClass(variant),
+      getBadgeSizeClass(size),
+      outline && 'badge-outline',
+      'font-medium tracking-tight',
+      className,
+    ),
+  )
+</script>
+
+<span class={badgeClass}>
+  {#if children}
+    {@render children()}
+  {/if}
+</span>

package/dist/components/primitives/Badge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { BadgeProps } from '../../types.js';
+/**
+ * Badge
+ * 徽章组件，支持多种变体与尺寸
+ */
+declare const Badge: import("svelte").Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/primitives/BareButton.svelte

@@ -0,0 +1,45 @@
+<!--
+  =============================================================================
+  @h-ai/ui - BareButton 组件
+  =============================================================================
+  无样式按钮组件（不注入 btn 类），用于自定义布局场景
+
+  使用 Svelte 5 Runes ($props)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { BareButtonProps } from '../../types.js'
+
+  const {
+    type = 'button',
+    disabled = false,
+    class: className = '',
+    ariaLabel = '',
+    role = undefined,
+    ariaSelected = undefined,
+    tabindex = undefined,
+    onclick,
+    onkeydown,
+    children,
+  }: BareButtonProps = $props()
+
+  function handleClick(e: MouseEvent) {
+    onclick?.(e)
+  }
+</script>
+
+<button
+  {type}
+  class={className}
+  disabled={disabled}
+  aria-label={ariaLabel || undefined}
+  role={role}
+  aria-selected={ariaSelected}
+  tabindex={tabindex}
+  onclick={handleClick}
+  onkeydown={onkeydown}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</button>

package/dist/components/primitives/BareButton.svelte.d.ts

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

package/dist/components/primitives/BareInput.svelte

@@ -0,0 +1,101 @@
+<!--
+  =============================================================================
+  @h-ai/ui - BareInput 组件
+  =============================================================================
+  无样式输入框组件，仅渲染原生 input
+
+  使用 Svelte 5 Runes ($props, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { BareInputProps } from '../../types.js'
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder,
+    disabled = false,
+    readonly = false,
+    required = false,
+    class: className = '',
+    id,
+    name,
+    autocomplete,
+    pattern,
+    list,
+    accept,
+    multiple,
+    minlength,
+    maxlength,
+    min,
+    max,
+    step,
+    inputmode,
+    inputRef = $bindable<HTMLInputElement | undefined>(),
+    role,
+    ariaExpanded,
+    ariaControls,
+    ariaAutocomplete,
+    oninput,
+    onchange,
+    onkeydown,
+    onblur,
+    onfocus,
+    oninvalid,
+  }: BareInputProps = $props()
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    value = e.currentTarget.value
+    oninput?.(e)
+  }
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(e)
+  }
+
+  function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    onkeydown?.(e)
+  }
+
+  function handleBlur(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    onblur?.(e)
+  }
+
+  function handleFocus(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    onfocus?.(e)
+  }
+</script>
+
+<input
+  bind:this={inputRef}
+  {id}
+  {name}
+  {type}
+  {placeholder}
+  {disabled}
+  {readonly}
+  {required}
+  {pattern}
+  {list}
+  {accept}
+  {multiple}
+  {minlength}
+  {min}
+  {max}
+  {maxlength}
+  {step}
+  inputmode={inputmode}
+  autocomplete={autocomplete as HTMLInputElement['autocomplete']}
+  role={role}
+  aria-expanded={ariaExpanded}
+  aria-controls={ariaControls}
+  aria-autocomplete={ariaAutocomplete}
+  class={className}
+  bind:value
+  oninput={handleInput}
+  onchange={handleChange}
+  onkeydown={handleKeydown}
+  onblur={handleBlur}
+  onfocus={handleFocus}
+  oninvalid={oninvalid}
+/>

package/dist/components/primitives/BareInput.svelte.d.ts

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

package/dist/components/primitives/Button.svelte

@@ -0,0 +1,60 @@
+<!--
+  @component Button
+  通用按钮组件，支持多种变体和尺寸。
+-->
+<script lang='ts'>
+  import type { ButtonProps } from '../../types.js'
+  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+
+  const {
+    variant = 'default',
+    size = 'md',
+    ariaLabel = '',
+    disabled = false,
+    loading = false,
+    outline = false,
+    circle = false,
+    class: className = '',
+    type = 'button',
+    onclick,
+    children,
+  }: ButtonProps = $props()
+
+  const buttonClass = $derived(
+    cn(
+      'btn no-animation',
+      getVariantClass(variant),
+      getSizeClass(size),
+      outline && 'btn-outline',
+      circle && 'btn-circle',
+      loading && 'opacity-70 pointer-events-none',
+      'font-medium tracking-[-0.01em]',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-base-100',
+      'active:scale-[0.97]',
+      className,
+    ),
+  )
+
+  function handleClick(e: MouseEvent) {
+    if (disabled || loading) {
+      e.preventDefault()
+      return
+    }
+    onclick?.(e)
+  }
+</script>
+
+<button
+  {type}
+  class={buttonClass}
+  disabled={disabled || loading}
+  aria-label={ariaLabel || undefined}
+  onclick={handleClick}
+>
+  {#if loading}
+    <span class='loading loading-spinner loading-xs'></span>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+</button>

package/dist/components/primitives/Button.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonProps } from '../../types.js';
+/**
+ * Button
+ * 通用按钮组件，支持多种变体和尺寸。
+ */
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/primitives/Checkbox.svelte

@@ -0,0 +1,58 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Checkbox 组件
+  =============================================================================
+  复选框组件
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { CheckboxProps } from '../../types.js'
+  import { cn, generateId, getSizeClass } from '../../utils.js'
+
+  let {
+    checked = $bindable(false),
+    label = '',
+    size = 'md',
+    disabled = false,
+    readonly = false,
+    indeterminate = false,
+    class: className = '',
+    onchange,
+  }: CheckboxProps = $props()
+
+  const id = generateId('checkbox')
+
+  const checkboxClass = $derived(
+    cn(
+      'checkbox',
+      getSizeClass(size, 'checkbox'),
+      className,
+    ),
+  )
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    if (readonly)
+      return
+    checked = e.currentTarget.checked
+    onchange?.(checked)
+  }
+</script>
+
+<div class='inline-flex'>
+  <label class='label cursor-pointer gap-2' for={id}>
+    <input
+      {id}
+      type='checkbox'
+      class={checkboxClass}
+      disabled={disabled || readonly}
+      bind:checked
+      bind:indeterminate
+      onchange={handleChange}
+    />
+    {#if label}
+      <span>{label}</span>
+    {/if}
+  </label>
+</div>

package/dist/components/primitives/Checkbox.svelte.d.ts

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

package/dist/components/primitives/IconButton.svelte

@@ -0,0 +1,105 @@
+<!--
+  =============================================================================
+  @h-ai/ui - IconButton 组件
+  =============================================================================
+  图标按钮组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { IconButtonProps } from '../../types.js'
+  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+
+  const {
+    icon,
+    label = '',
+    ariaLabel = '',
+    tooltip = '',
+    variant = 'default',
+    size = 'md',
+    disabled = false,
+    loading = false,
+    class: className = '',
+    onclick,
+    children,
+  }: IconButtonProps = $props()
+
+  /** 计算最终的 aria-label */
+  const computedAriaLabel = $derived(ariaLabel || label || tooltip)
+
+  const buttonClass = $derived(
+    cn(
+      'btn btn-circle',
+      getVariantClass(variant),
+      getSizeClass(size),
+      loading && 'btn-loading',
+      className,
+    ),
+  )
+
+  const iconSize = $derived({
+    'xs': 'w-3 h-3',
+    'sm': 'w-4 h-4',
+    'md': 'w-5 h-5',
+    'lg': 'w-6 h-6',
+    'xl': 'w-7 h-7',
+    '2xl': 'w-8 h-8',
+    '3xl': 'w-9 h-9',
+    '4xl': 'w-10 h-10',
+  }[size])
+
+  function handleClick(e: MouseEvent) {
+    if (disabled || loading) {
+      e.preventDefault()
+      return
+    }
+    onclick?.(e)
+  }
+</script>
+
+{#if tooltip}
+  <div class='tooltip' data-tip={tooltip}>
+    <button
+      type='button'
+      class={buttonClass}
+      {disabled}
+      aria-label={computedAriaLabel}
+      onclick={handleClick}
+    >
+      {#if loading}
+        <span class='loading loading-spinner'></span>
+      {:else if children}
+        {@render children()}
+      {:else if typeof icon === 'function'}
+        {@render icon()}
+      {:else if icon}
+        <span class={iconSize}>
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -- 受控 SVG 图标渲染 -->
+          {@html icon}
+        </span>
+      {/if}
+    </button>
+  </div>
+{:else}
+  <button
+    type='button'
+    class={buttonClass}
+    {disabled}
+    aria-label={computedAriaLabel}
+    onclick={handleClick}
+  >
+    {#if loading}
+      <span class='loading loading-spinner'></span>
+    {:else if children}
+      {@render children()}
+    {:else if typeof icon === 'function'}
+      {@render icon()}
+    {:else if icon}
+      <span class={iconSize}>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -- 受控 SVG 图标渲染 -->
+        {@html icon}
+      </span>
+    {/if}
+  </button>
+{/if}

package/dist/components/primitives/IconButton.svelte.d.ts

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

package/dist/components/primitives/Input.svelte

@@ -0,0 +1,130 @@
+<!--
+  @component Input
+  文本输入框组件，支持自定义验证消息
+-->
+<script lang='ts'>
+  import type { InputProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    type = 'text',
+    size = 'md',
+    disabled = false,
+    readonly = false,
+    required = false,
+    error = '',
+    validationMessage = '',
+    class: className = '',
+    id,
+    name,
+    autocomplete,
+    pattern,
+    list,
+    inputmode,
+    step,
+    minlength,
+    min,
+    max,
+    maxlength,
+    inputRef = $bindable<HTMLInputElement | undefined>(),
+    oninput,
+    onchange,
+    onkeydown,
+    onblur,
+    onfocus,
+    oninvalid,
+  }: InputProps = $props()
+
+  const containerHeight = $derived(
+    size === 'xs'
+      ? 'h-8'
+      : size === 'sm'
+      ? 'h-9'
+      : size === 'lg'
+      ? 'h-12'
+      : size === 'xl'
+      ? 'h-14'
+      : 'h-10',
+  )
+
+  const containerClass = $derived(
+    cn(
+      'flex items-center w-full rounded-lg border bg-base-100',
+      containerHeight,
+      error
+        ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+        : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      'transition-[border-color,box-shadow] duration-150',
+      disabled && 'opacity-50 cursor-not-allowed',
+      className,
+    ),
+  )
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity('')
+    }
+    value = e.currentTarget.value
+    oninput?.(e)
+  }
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    onchange?.(e)
+  }
+
+  function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
+    onkeydown?.(e)
+  }
+
+  function handleBlur(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    onblur?.(e)
+  }
+
+  function handleFocus(e: FocusEvent & { currentTarget: HTMLInputElement }) {
+    onfocus?.(e)
+  }
+
+  function handleInvalid(e: Event & { currentTarget: HTMLInputElement }) {
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity(validationMessage)
+    }
+    oninvalid?.(e)
+  }
+</script>
+
+<div class='fieldset w-full'>
+  <div class={containerClass}>
+    <input
+      bind:this={inputRef}
+      {id}
+      {name}
+      {type}
+      {placeholder}
+      {disabled}
+      {readonly}
+      {required}
+      {pattern}
+      {list}
+      {minlength}
+      {min}
+      {max}
+      {maxlength}
+      {step}
+      inputmode={inputmode}
+      autocomplete={autocomplete as HTMLInputElement['autocomplete']}
+      class='flex-1 h-full px-3 bg-transparent border-none outline-none text-sm placeholder:text-base-content/35'
+      bind:value
+      oninput={handleInput}
+      onchange={handleChange}
+      onkeydown={handleKeydown}
+      onblur={handleBlur}
+      onfocus={handleFocus}
+      oninvalid={handleInvalid}
+    />
+  </div>
+  {#if error}
+    <p class='mt-1.5 text-xs text-error/80 leading-tight'>{error}</p>
+  {/if}
+</div>

package/dist/components/primitives/Input.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { InputProps } from '../../types.js';
+/**
+ * Input
+ * 文本输入框组件，支持自定义验证消息
+ */
+declare const Input: import("svelte").Component<InputProps, {}, "value" | "inputRef">;
+type Input = ReturnType<typeof Input>;
+export default Input;