@h-ai/ui 0.1.0-alpha5

package/dist/components/primitives/Progress.svelte

@@ -0,0 +1,58 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Progress 组件
+  =============================================================================
+  进度条组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ProgressProps } from '../../types.js'
+  import { cn, getProgressVariantClass } from '../../utils.js'
+
+  const {
+    value,
+    max = 100,
+    size = 'md',
+    variant = 'primary',
+    showLabel = false,
+    class: className = '',
+  }: ProgressProps = $props()
+
+  const sizeMap = {
+    'xs': 'h-1',
+    'sm': 'h-2',
+    'md': 'h-3',
+    'lg': 'h-4',
+    'xl': 'h-5',
+    '2xl': 'h-6',
+    '3xl': 'h-7',
+    '4xl': 'h-8',
+  }
+
+  const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)))
+
+  const progressClass = $derived(
+    cn(
+      'progress w-full',
+      getProgressVariantClass(variant),
+      sizeMap[size],
+      className,
+    ),
+  )
+</script>
+
+<div class='w-full'>
+  <progress
+    class={progressClass}
+    {value}
+    {max}
+  ></progress>
+
+  {#if showLabel}
+    <div class='text-xs text-center mt-1'>
+      {percentage.toFixed(0)}%
+    </div>
+  {/if}
+</div>

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

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

package/dist/components/primitives/Radio.svelte

@@ -0,0 +1,60 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Radio 组件
+  =============================================================================
+  单选框组件，支持组模式
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  =============================================================================
+-->
+<script lang='ts' generics="T = string">
+  import type { RadioProps, SelectOption } from '../../types.js'
+  import { cn, getSizeClass } from '../../utils.js'
+
+  let {
+    value = $bindable() as T,
+    options = [] as SelectOption<T>[],
+    name = '',
+    size = 'md',
+    disabled = false,
+    direction = 'vertical',
+    class: className = '',
+    onchange,
+  }: RadioProps<T> = $props()
+
+  const containerClass = $derived(
+    cn(
+      'flex gap-2',
+      direction === 'horizontal' ? 'flex-row flex-wrap' : 'flex-col',
+      className,
+    ),
+  )
+
+  const radioClass = $derived(
+    cn(
+      'radio',
+      getSizeClass(size, 'radio'),
+    ),
+  )
+
+  function handleChange(optionValue: T) {
+    value = optionValue
+    onchange?.(optionValue)
+  }
+</script>
+
+<div class={containerClass} role='radiogroup'>
+  {#each options as option (option.value)}
+    <label class='label cursor-pointer gap-2 justify-start'>
+      <input
+        type='radio'
+        {name}
+        class={radioClass}
+        checked={value === option.value}
+        disabled={disabled || option.disabled}
+        onchange={() => handleChange(option.value)}
+      />
+      <span>{option.label}</span>
+    </label>
+  {/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type { RadioProps } from '../../types.js';
+declare function $$render<T = string>(): {
+    props: RadioProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = string>(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 = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Radio: $$IsomorphicComponent;
+type Radio<T = string> = InstanceType<typeof Radio<T>>;
+export default Radio;

package/dist/components/primitives/Range.svelte

@@ -0,0 +1,117 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Range 组件
+  =============================================================================
+  范围滑块组件，支持不同尺寸和颜色变体
+
+  使用 Svelte 5 Runes ($props, $derived)
+  使用 DaisyUI range 类
+  =============================================================================
+-->
+<script lang='ts'>
+  import { cn } from '../../utils.js'
+  import BareInput from './BareInput.svelte'
+
+  interface Props {
+    /** 当前值 */
+    value?: number
+    /** 最小值 */
+    min?: number
+    /** 最大值 */
+    max?: number
+    /** 步长 */
+    step?: number
+    /** 尺寸 */
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    /** 颜色变体 */
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info'
+    /** 是否显示步长刻度 */
+    showSteps?: boolean
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 变化事件 */
+    onchange?: (value: number) => void
+    /** 输入事件 */
+    oninput?: (value: number) => void
+    /** 自定义类名 */
+    class?: string
+  }
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    size = 'md',
+    variant = 'default',
+    showSteps = false,
+    disabled = false,
+    onchange,
+    oninput,
+    class: className = '',
+  }: Props = $props()
+
+  const sizeClass = $derived({
+    xs: 'range-xs',
+    sm: 'range-sm',
+    md: 'range-md',
+    lg: 'range-lg',
+  }[size] || 'range-md')
+
+  const variantClass = $derived({
+    default: '',
+    primary: 'range-primary',
+    secondary: 'range-secondary',
+    accent: 'range-accent',
+    success: 'range-success',
+    warning: 'range-warning',
+    error: 'range-error',
+    info: 'range-info',
+  }[variant] || '')
+
+  const rangeClass = $derived(
+    cn(
+      'range',
+      sizeClass,
+      variantClass,
+      className,
+    ),
+  )
+
+  // 计算步长数量
+  const stepCount = $derived(showSteps ? Math.floor((max - min) / step) + 1 : 0)
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLInputElement
+    value = Number(target.value)
+    oninput?.(value)
+  }
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLInputElement
+    value = Number(target.value)
+    onchange?.(value)
+  }
+</script>
+
+<div class='w-full'>
+  <BareInput
+    type='range'
+    class={rangeClass}
+    {min}
+    {max}
+    {step}
+    value={`${value}`}
+    {disabled}
+    oninput={handleInput}
+    onchange={handleChange}
+  />
+
+  {#if showSteps && stepCount > 0}
+    <div class='flex w-full justify-between px-2 text-xs text-base-content/60'>
+      {#each Array.from({ length: stepCount }) as _}
+        <span>|</span>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,27 @@
+interface Props {
+    /** 当前值 */
+    value?: number;
+    /** 最小值 */
+    min?: number;
+    /** 最大值 */
+    max?: number;
+    /** 步长 */
+    step?: number;
+    /** 尺寸 */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /** 颜色变体 */
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    /** 是否显示步长刻度 */
+    showSteps?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 变化事件 */
+    onchange?: (value: number) => void;
+    /** 输入事件 */
+    oninput?: (value: number) => void;
+    /** 自定义类名 */
+    class?: string;
+}
+declare const Range: import("svelte").Component<Props, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

package/dist/components/primitives/Rating.svelte

@@ -0,0 +1,148 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Rating 组件
+  =============================================================================
+  星级评分组件，支持全星/半星、只读模式、不同尺寸和颜色
+
+  使用 Svelte 5 Runes ($props, $state, $derived)
+  使用 DaisyUI rating 类
+  =============================================================================
+-->
+<script lang='ts'>
+  import { uiM } from '../../messages.js'
+  import { cn } from '../../utils.js'
+
+  interface Props {
+    /** 当前评分值 (0 - max) */
+    value?: number
+    /** 最大星数 */
+    max?: number
+    /** 尺寸 */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+    /** 颜色 */
+    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'warning' | 'success' | 'error' | 'info'
+    /** 是否只读 */
+    readonly?: boolean
+    /** 是否支持半星 */
+    half?: boolean
+    /** 是否允许清除（点击已选星清除） */
+    clearable?: boolean
+    /** 是否禁用 */
+    disabled?: boolean
+    /** 评分名称（用于表单） */
+    name?: string
+    /** 变化事件 */
+    onchange?: (value: number) => void
+    /** 自定义类名 */
+    class?: string
+  }
+
+  let {
+    value = $bindable(0),
+    max = 5,
+    size = 'md',
+    color = 'warning',
+    readonly = false,
+    half = false,
+    clearable = false,
+    disabled = false,
+    name = `rating-${Math.random().toString(36).slice(2, 9)}`,
+    onchange,
+    class: className = '',
+  }: Props = $props()
+
+  const sizeClass = $derived({
+    xs: 'rating-xs',
+    sm: 'rating-sm',
+    md: 'rating-md',
+    lg: 'rating-lg',
+    xl: 'rating-xl',
+  }[size] || 'rating-md')
+
+  const colorClass = $derived({
+    default: 'bg-base-content',
+    primary: 'bg-primary',
+    secondary: 'bg-secondary',
+    accent: 'bg-accent',
+    warning: 'bg-warning',
+    success: 'bg-success',
+    error: 'bg-error',
+    info: 'bg-info',
+  }[color] || 'bg-warning')
+
+  const ratingClass = $derived(
+    cn(
+      'rating',
+      sizeClass,
+      half && 'rating-half',
+      className,
+    ),
+  )
+
+  function handleChange(newValue: number) {
+    if (readonly || disabled)
+      return
+    value = newValue
+    onchange?.(newValue)
+  }
+
+  // 生成评分项
+  const items = $derived.by(() => {
+    const result: { value: number, isHalf: boolean }[] = []
+
+    if (clearable) {
+      result.push({ value: 0, isHalf: false })
+    }
+
+    for (let i = 1; i <= max; i++) {
+      if (half) {
+        result.push({ value: i - 0.5, isHalf: true })
+        result.push({ value: i, isHalf: false })
+      }
+      else {
+        result.push({ value: i, isHalf: false })
+      }
+    }
+
+    return result
+  })
+</script>
+
+{#if readonly}
+  <!-- 只读模式 - 使用 div 而非 input -->
+  <div class={cn('rating', sizeClass, className)}>
+    {#each Array.from({ length: max }) as _, i}
+      <div
+        class={cn(
+          'mask mask-star-2',
+          colorClass,
+          i < Math.floor(value) && 'opacity-100',
+          i >= Math.ceil(value) && 'opacity-30',
+          i === Math.floor(value) && value % 1 !== 0 && 'opacity-60',
+        )}
+        aria-label={uiM('rating_star', { count: i + 1 })}
+        aria-current={i + 1 <= value ? 'true' : undefined}
+      ></div>
+    {/each}
+  </div>
+{:else}
+  <!-- 交互模式 - 使用 radio input -->
+  <div class={ratingClass}>
+    {#each items as item}
+      <input
+        type='radio'
+        {name}
+        class={cn(
+          item.value === 0 ? 'rating-hidden' : 'mask mask-star-2',
+          item.value !== 0 && colorClass,
+          half && item.isHalf && 'mask-half-1',
+          half && !item.isHalf && item.value !== 0 && 'mask-half-2',
+        )}
+        aria-label={item.value === 0 ? uiM('rating_clear') : uiM('rating_star', { count: item.value })}
+        checked={value === item.value}
+        {disabled}
+        onchange={() => handleChange(item.value)}
+      />
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,27 @@
+interface Props {
+    /** 当前评分值 (0 - max) */
+    value?: number;
+    /** 最大星数 */
+    max?: number;
+    /** 尺寸 */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** 颜色 */
+    color?: 'default' | 'primary' | 'secondary' | 'accent' | 'warning' | 'success' | 'error' | 'info';
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否支持半星 */
+    half?: boolean;
+    /** 是否允许清除（点击已选星清除） */
+    clearable?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 评分名称（用于表单） */
+    name?: string;
+    /** 变化事件 */
+    onchange?: (value: number) => void;
+    /** 自定义类名 */
+    class?: string;
+}
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/components/primitives/Select.svelte

@@ -0,0 +1,95 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Select 组件
+  =============================================================================
+  下拉选择框组件
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  支持自定义验证消息（validationMessage）覆盖浏览器原生提示
+  =============================================================================
+-->
+<script lang='ts' generics="T = string">
+  import type { SelectProps } from '../../types.js'
+  import { cn, getInputSizeClass } from '../../utils.js'
+
+  let {
+    value = $bindable<T>(),
+    options,
+    placeholder = '',
+    size = 'md',
+    disabled = false,
+    required = false,
+    error = '',
+    validationMessage = '',
+    class: className = '',
+    id,
+    onchange,
+    children,
+  }: SelectProps<T> = $props()
+
+  let selectRef: HTMLSelectElement | undefined = $state()
+
+  const selectClass = $derived(
+    cn(
+      'select w-full',
+      getInputSizeClass(size),
+      error && 'select-error',
+      className,
+    ),
+  )
+
+  // 当 validationMessage 变化时更新自定义验证消息
+  $effect(() => {
+    if (selectRef) {
+      selectRef.setCustomValidity(validationMessage)
+    }
+  })
+
+  function handleChange(e: Event & { currentTarget: HTMLSelectElement }) {
+    const selectedValue = e.currentTarget.value as T
+    value = selectedValue
+    // 选择后重置自定义验证
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity(validationMessage)
+    }
+    onchange?.(selectedValue)
+  }
+
+  function handleInvalid(e: Event & { currentTarget: HTMLSelectElement }) {
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity(validationMessage)
+    }
+  }
+</script>
+
+<div class='fieldset w-full'>
+  <select
+    bind:this={selectRef}
+    {id}
+    class={selectClass}
+    {disabled}
+    {required}
+    onchange={handleChange}
+    oninvalid={handleInvalid}
+  >
+    {#if placeholder}
+      <option value="" disabled selected={!value}>{placeholder}</option>
+    {/if}
+    {#if children}
+      {@render children()}
+    {:else if options}
+      {#each options as option}
+        <option
+          value={option.value as string}
+          disabled={option.disabled}
+          selected={value === option.value}
+        >
+          {option.label}
+        </option>
+      {/each}
+    {/if}
+  </select>
+  {#if error}
+    <span class='fieldset-label text-error'>{error}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { SelectProps } from '../../types.js';
+declare function $$render<T = string>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = string>(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 = string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T = string> = InstanceType<typeof Select<T>>;
+export default Select;

package/dist/components/primitives/Spinner.svelte

@@ -0,0 +1,54 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Spinner 组件
+  =============================================================================
+  加载指示器组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { SpinnerProps } from '../../types.js'
+  import { cn } from '../../utils.js'
+
+  const {
+    size = 'md',
+    variant = 'primary',
+    class: className = '',
+  }: SpinnerProps = $props()
+
+  const sizeMap = {
+    'xs': 'loading-xs',
+    'sm': 'loading-sm',
+    'md': 'loading-md',
+    'lg': 'loading-lg',
+    'xl': 'loading-lg', // DaisyUI 没有 xl，使用 lg
+    '2xl': 'loading-lg',
+    '3xl': 'loading-lg',
+    '4xl': 'loading-lg',
+  }
+
+  const variantMap = {
+    default: 'text-neutral',
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    info: 'text-info',
+    ghost: 'text-base-content',
+    link: 'text-base-content',
+    outline: 'text-base-content',
+  }
+
+  const spinnerClass = $derived(
+    cn(
+      'loading loading-spinner',
+      sizeMap[size],
+      variantMap[variant] ?? variantMap.default,
+      className,
+    ),
+  )
+</script>
+
+<span class={spinnerClass}></span>

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

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