@h-ai/ui 0.1.0-alpha5

package/dist/components/primitives/Switch.svelte

@@ -0,0 +1,53 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Switch 组件
+  =============================================================================
+  开关组件
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { SwitchProps } from '../../types.js'
+  import { cn, generateId, getSizeClass } from '../../utils.js'
+
+  let {
+    checked = $bindable(false),
+    label = '',
+    size = 'md',
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: SwitchProps = $props()
+
+  const id = generateId('switch')
+
+  const toggleClass = $derived(
+    cn(
+      'toggle',
+      getSizeClass(size, 'toggle'),
+      className,
+    ),
+  )
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    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={toggleClass}
+      {disabled}
+      bind:checked
+      onchange={handleChange}
+    />
+    {#if label}
+      <span>{label}</span>
+    {/if}
+  </label>
+</div>

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

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

package/dist/components/primitives/Tag.svelte

@@ -0,0 +1,64 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Tag 组件
+  =============================================================================
+  标签组件
+
+  使用 Svelte 5 Runes ($props, $derived)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { TagProps } from '../../types.js'
+  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+  import IconButton from './IconButton.svelte'
+
+  const {
+    text = '',
+    variant = 'default',
+    size = 'md',
+    closable = false,
+    outline = false,
+    /** 移除按钮的 aria-label */
+    removeLabel = 'Remove tag',
+    class: className = '',
+    onclose,
+    children,
+  }: TagProps = $props()
+
+  const tagClass = $derived(
+    cn(
+      'badge gap-1',
+      getVariantClass(variant, 'badge'),
+      getSizeClass(size, 'badge'),
+      outline && 'badge-outline',
+      className,
+    ),
+  )
+
+  function handleClose(e: MouseEvent) {
+    e.stopPropagation()
+    onclose?.()
+  }
+</script>
+
+<span class={tagClass}>
+  {#if children}
+    {@render children()}
+  {:else}
+    {text}
+  {/if}
+
+  {#if closable}
+    <IconButton
+      variant='ghost'
+      size='xs'
+      class='-mr-1'
+      onclick={handleClose}
+      ariaLabel={removeLabel}
+    >
+      <svg xmlns='http://www.w3.org/2000/svg' class='h-3 w-3' viewBox='0 0 20 20' fill='currentColor'>
+        <path fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd' />
+      </svg>
+    </IconButton>
+  {/if}
+</span>

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

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

package/dist/components/primitives/Textarea.svelte

@@ -0,0 +1,92 @@
+<!--
+  =============================================================================
+  @h-ai/ui - Textarea 组件
+  =============================================================================
+  多行文本输入框组件
+
+  使用 Svelte 5 Runes ($props, $derived, $bindable)
+  支持自定义验证消息（validationMessage）覆盖浏览器原生提示
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { TextareaProps } from '../../types.js'
+  import { cn, getInputSizeClass } from '../../utils.js'
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    rows = 3,
+    size = 'md',
+    disabled = false,
+    readonly = false,
+    required = false,
+    autoResize = false,
+    error = '',
+    validationMessage = '',
+    class: className = '',
+    id,
+    name,
+    oninput,
+  }: TextareaProps = $props()
+
+  let textareaRef: HTMLTextAreaElement | undefined = $state()
+
+  const textareaClass = $derived(
+    cn(
+      'textarea w-full',
+      getInputSizeClass(size),
+      error && 'textarea-error',
+      className,
+    ),
+  )
+
+  // 当 validationMessage 变化时更新自定义验证消息
+  $effect(() => {
+    if (textareaRef) {
+      textareaRef.setCustomValidity(validationMessage)
+    }
+  })
+
+  function handleInput(e: Event & { currentTarget: HTMLTextAreaElement }) {
+    value = e.currentTarget.value
+
+    // 自动调整高度
+    if (autoResize) {
+      e.currentTarget.style.height = 'auto'
+      e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`
+    }
+
+    // 输入时重置自定义验证
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity(validationMessage)
+    }
+
+    oninput?.(e)
+  }
+
+  function handleInvalid(e: Event & { currentTarget: HTMLTextAreaElement }) {
+    if (validationMessage) {
+      e.currentTarget.setCustomValidity(validationMessage)
+    }
+  }
+</script>
+
+<div class='fieldset w-full'>
+  <textarea
+    bind:this={textareaRef}
+    {id}
+    {name}
+    {placeholder}
+    {rows}
+    {disabled}
+    {readonly}
+    {required}
+    class={textareaClass}
+    bind:value
+    oninput={handleInput}
+    oninvalid={handleInvalid}
+  ></textarea>
+  {#if error}
+    <span class='fieldset-label text-error'>{error}</span>
+  {/if}
+</div>

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

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

package/dist/components/primitives/ToggleCheckbox.svelte

@@ -0,0 +1,36 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ToggleCheckbox 组件
+  =============================================================================
+  仅渲染 checkbox input（用于 collapse/drawer 等结构要求）
+
+  使用 Svelte 5 Runes ($props, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ToggleCheckboxProps } from '../../types.js'
+
+  let {
+    checked = $bindable(false),
+    name,
+    id,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: ToggleCheckboxProps = $props()
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    checked = e.currentTarget.checked
+    onchange?.(checked)
+  }
+</script>
+
+<input
+  {id}
+  {name}
+  type='checkbox'
+  class={className}
+  {disabled}
+  checked={checked}
+  onchange={handleChange}
+/>

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

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

package/dist/components/primitives/ToggleInput.svelte

@@ -0,0 +1,36 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ToggleInput 组件
+  =============================================================================
+  仅渲染原生 checkbox/radio input，用于需要 input 作为直接子元素的场景
+
+  使用 Svelte 5 Runes ($props, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ToggleCheckboxProps } from '../../types.js'
+
+  let {
+    checked = $bindable(false),
+    name,
+    id,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: ToggleCheckboxProps = $props()
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    checked = e.currentTarget.checked
+    onchange?.(checked)
+  }
+</script>
+
+<input
+  {id}
+  {name}
+  type='checkbox'
+  class={className}
+  {disabled}
+  checked={checked}
+  onchange={handleChange}
+/>

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

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

package/dist/components/primitives/ToggleRadio.svelte

@@ -0,0 +1,36 @@
+<!--
+  =============================================================================
+  @h-ai/ui - ToggleRadio 组件
+  =============================================================================
+  仅渲染 radio input（用于 collapse/accordion 等结构要求）
+
+  使用 Svelte 5 Runes ($props, $bindable)
+  =============================================================================
+-->
+<script lang='ts'>
+  import type { ToggleRadioProps } from '../../types.js'
+
+  let {
+    checked = $bindable(false),
+    name,
+    id,
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: ToggleRadioProps = $props()
+
+  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
+    checked = e.currentTarget.checked
+    onchange?.(checked)
+  }
+</script>
+
+<input
+  {id}
+  {name}
+  type='radio'
+  class={className}
+  {disabled}
+  checked={checked}
+  onchange={handleChange}
+/>

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

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

package/dist/components/primitives/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @h-ai/ui — 原子组件 (Primitives)
+ *
+ * 不可再分的基础 UI 单元，职责单一，无业务逻辑。
+ * @module index
+ */
+export { default as Avatar } from './Avatar.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as BareButton } from './BareButton.svelte';
+export { default as BareInput } from './BareInput.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Range } from './Range.svelte';
+export { default as Rating } from './Rating.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as ToggleCheckbox } from './ToggleCheckbox.svelte';
+export { default as ToggleInput } from './ToggleInput.svelte';
+export { default as ToggleRadio } from './ToggleRadio.svelte';

package/dist/components/primitives/index.js

@@ -0,0 +1,30 @@
+/**
+ * @h-ai/ui — 原子组件 (Primitives)
+ *
+ * 不可再分的基础 UI 单元，职责单一，无业务逻辑。
+ * @module index
+ */
+export { default as Avatar } from './Avatar.svelte';
+// 展示标签
+export { default as Badge } from './Badge.svelte';
+// 按钮
+export { default as BareButton } from './BareButton.svelte';
+// 表单控件
+export { default as BareInput } from './BareInput.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as Input } from './Input.svelte';
+export { default as Progress } from './Progress.svelte';
+export { default as Radio } from './Radio.svelte';
+export { default as Range } from './Range.svelte';
+// 状态指示 / 评分
+export { default as Rating } from './Rating.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Spinner } from './Spinner.svelte';
+export { default as Switch } from './Switch.svelte';
+export { default as Tag } from './Tag.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as ToggleCheckbox } from './ToggleCheckbox.svelte';
+export { default as ToggleInput } from './ToggleInput.svelte';
+export { default as ToggleRadio } from './ToggleRadio.svelte';