@h-ai/ui 0.1.0-alpha.29 → 0.1.0-alpha.31

package/dist/components/compounds/Timeline.svelte

@@ -11,8 +11,9 @@
 
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
   import type { TimelineItem } from './timeline-types.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 时间线项数据 */
@@ -45,8 +46,10 @@
     snapIcon = false,
     class: className = '',
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const timelineClass = $derived(
     cn(
       'timeline',
@@ -95,7 +98,7 @@
   }
 </script>
 
-<ul class={timelineClass}>
+<ul {...dataAttributes} class={timelineClass}>
   {#each items as item, index (item.id)}
     <li>
       <!-- 前置连线 -->

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 import type { TimelineItem } from './timeline-types.js';
 interface Props {
     /** 时间线项数据 */
@@ -20,6 +21,7 @@ interface Props {
     /** 自定义项渲染 */
     children?: Snippet<[TimelineItem, number]>;
 }
-declare const Timeline: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Timeline: import("svelte").Component<$$ComponentProps, {}, "">;
 type Timeline = ReturnType<typeof Timeline>;
 export default Timeline;

package/dist/components/compounds/ToastContainer.svelte

@@ -14,12 +14,16 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import { onMount } from 'svelte'
   import { uiM } from '../../messages.js'
   import { toast } from '../../toast.svelte.js'
-  import { cn, getAlertVariantClass } from '../../utils.js'
+  import { cn, getAlertVariantClass, getDataAttributes } from '../../utils.js'
   import IconButton from '../primitives/IconButton.svelte'
 
+  const { ...restProps }: DataAttributes = $props()
+  const dataAttributes = $derived(getDataAttributes(restProps))
+
   const positionMap = {
     'top-right': 'toast-top toast-end',
     'top-left': 'toast-top toast-start',
@@ -150,7 +154,7 @@
   })
 </script>
 
-<div bind:this={layerElement} popover='manual' class='hai-toast-layer'>
+<div {...dataAttributes} bind:this={layerElement} popover='manual' class='hai-toast-layer'>
   {#each Object.entries(groupedItems()) as [position, items] (position)}
     <div class={cn('toast', positionMap[position as keyof typeof positionMap])}>
       {#each items as item (item.id)}

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

@@ -1,3 +1,4 @@
-declare const ToastContainer: import("svelte").Component<Record<string, never>, {}, "">;
+import type { DataAttributes } from '../../types.js';
+declare const ToastContainer: import("svelte").Component<DataAttributes, {}, "">;
 type ToastContainer = ReturnType<typeof ToastContainer>;
 export default ToastContainer;

package/dist/components/compounds/Tooltip.svelte

@@ -8,16 +8,18 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TooltipProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, TooltipProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     content,
     position = 'top',
     class: className = '',
     children,
-  }: TooltipProps = $props()
+    ...restProps
+  }: TooltipProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const positionMap = {
     top: 'tooltip-top',
     right: 'tooltip-right',
@@ -34,7 +36,7 @@
   )
 </script>
 
-<div class={tooltipClass} data-tip={content}>
+<div {...dataAttributes} class={tooltipClass} data-tip={content}>
   {#if children}
     {@render children()}
   {/if}

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

@@ -1,4 +1,5 @@
-import type { TooltipProps } from '../../types.js';
-declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+import type { DataAttributes, TooltipProps } from '../../types.js';
+type $$ComponentProps = TooltipProps & DataAttributes;
+declare const Tooltip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/components/primitives/Avatar.svelte

@@ -3,8 +3,8 @@
   头像组件，支持图片、名字首字母 fallback
 -->
 <script lang='ts'>
-  import type { AvatarProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { AvatarProps, DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const NAME_PART_SPLIT_REGEX = /\s+/
 
@@ -15,8 +15,10 @@
     size = 'md',
     shape = 'circle',
     class: className = '',
-  }: AvatarProps = $props()
+    ...restProps
+  }: AvatarProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeMap = {
     'xs': 'w-6 h-6',
     'sm': 'w-8 h-8',
@@ -87,7 +89,7 @@
   )
 </script>
 
-<div class={containerClass}>
+<div {...dataAttributes} class={containerClass}>
   <div
     class={innerClass}
     style:width={sizeValue}

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

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

package/dist/components/primitives/Badge.svelte

@@ -3,8 +3,8 @@
   徽章组件，支持多种变体与尺寸
 -->
 <script lang='ts'>
-  import type { BadgeProps } from '../../types.js'
-  import { cn, getBadgeSizeClass, getBadgeVariantClass } from '../../utils.js'
+  import type { BadgeProps, DataAttributes } from '../../types.js'
+  import { cn, getBadgeSizeClass, getBadgeVariantClass, getDataAttributes } from '../../utils.js'
 
   const {
     variant = 'default',
@@ -12,8 +12,10 @@
     outline = false,
     class: className = '',
     children,
-  }: BadgeProps = $props()
+    ...restProps
+  }: BadgeProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const badgeClass = $derived(
     cn(
       'badge',
@@ -26,7 +28,7 @@
   )
 </script>
 
-<span class={badgeClass}>
+<span {...dataAttributes} class={badgeClass}>
   {#if children}
     {@render children()}
   {/if}

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

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

package/dist/components/primitives/BareButton.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { BareButtonProps } from '../../types.js'
+  import type { BareButtonProps, DataAttributes } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   const {
     type = 'button',
@@ -21,23 +22,25 @@
     onclick,
     onkeydown,
     children,
-  }: BareButtonProps = $props()
+    ...restProps
+  }: BareButtonProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   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}
+<button {...dataAttributes}
+        {type}
+        class={className}
+        disabled={disabled}
+        aria-label={ariaLabel || undefined}
+        role={role}
+        aria-selected={ariaSelected}
+        tabindex={tabindex}
+        onclick={handleClick}
+        onkeydown={onkeydown}
 >
   {#if children}
     {@render children()}

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

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

package/dist/components/primitives/BareInput.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { BareInputProps } from '../../types.js'
+  import type { BareInputProps, DataAttributes } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     value = $bindable(''),
@@ -42,8 +43,10 @@
     onblur,
     onfocus,
     oninvalid,
-  }: BareInputProps = $props()
+    ...restProps
+  }: BareInputProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
     value = e.currentTarget.value
     oninput?.(e)
@@ -66,36 +69,36 @@
   }
 </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}
+<input {...dataAttributes}
+       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

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

package/dist/components/primitives/Button.svelte

@@ -3,8 +3,8 @@
   通用按钮组件，支持多种变体和尺寸。
 -->
 <script lang='ts'>
-  import type { ButtonProps } from '../../types.js'
-  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+  import type { ButtonProps, DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
 
   const {
     variant = 'default',
@@ -19,8 +19,10 @@
     type = 'button',
     onclick,
     children,
-  }: ButtonProps = $props()
+    ...restProps
+  }: ButtonProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const buttonClass = $derived(
     cn(
       'btn no-animation',
@@ -45,13 +47,13 @@
   }
 </script>
 
-<button
-  {type}
-  form={form || undefined}
-  class={buttonClass}
-  disabled={disabled || loading}
-  aria-label={ariaLabel || undefined}
-  onclick={handleClick}
+<button {...dataAttributes}
+        {type}
+        form={form || undefined}
+        class={buttonClass}
+        disabled={disabled || loading}
+        aria-label={ariaLabel || undefined}
+        onclick={handleClick}
 >
   {#if loading}
     <span class='loading loading-spinner loading-xs'></span>

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

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

package/dist/components/primitives/Checkbox.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { CheckboxProps } from '../../types.js'
-  import { cn, generateId, getSizeClass } from '../../utils.js'
+  import type { CheckboxProps, DataAttributes } from '../../types.js'
+  import { cn, generateId, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -20,8 +20,10 @@
     indeterminate = false,
     class: className = '',
     onchange,
-  }: CheckboxProps = $props()
+    ...restProps
+  }: CheckboxProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('checkbox')
 
   const checkboxClass = $derived(
@@ -40,7 +42,7 @@
   }
 </script>
 
-<div class='inline-flex'>
+<div {...dataAttributes} class='inline-flex'>
   <label class='label cursor-pointer gap-2' for={id}>
     <input
       {id}

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

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

package/dist/components/primitives/IconButton.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { IconButtonProps } from '../../types.js'
-  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+  import type { DataAttributes, IconButtonProps } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
 
   const SAFE_INLINE_SVG_REGEX = /^<svg[\s\S]*<\/svg>$/i
   const UNSAFE_INLINE_SVG_REGEX = /<\s*(?:script|foreignObject|iframe|object|embed|link|meta|img)\b|\son[a-z]+\s*=|(?:href|xlink:href)\s*=\s*['"]\s*(?:javascript:|vbscript:|data:text\/html)/i
@@ -26,8 +26,10 @@
     class: className = '',
     onclick,
     children,
-  }: IconButtonProps = $props()
+    ...restProps
+  }: IconButtonProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   /** 计算最终的 aria-label */
   const computedAriaLabel = $derived(ariaLabel || label || tooltip)
 
@@ -85,7 +87,7 @@
 </script>
 
 {#if tooltip}
-  <div class='tooltip' data-tip={tooltip}>
+  <div {...dataAttributes} class='tooltip' data-tip={tooltip}>
     <button
       type='button'
       class={buttonClass}

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

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

package/dist/components/primitives/Input.svelte

@@ -3,8 +3,8 @@
   文本输入框组件，支持自定义验证消息
 -->
 <script lang='ts'>
-  import type { InputProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, InputProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   let {
     value = $bindable(''),
@@ -35,8 +35,10 @@
     onblur,
     onfocus,
     oninvalid,
-  }: InputProps = $props()
+    ...restProps
+  }: InputProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const containerHeight = $derived(
     size === 'xs'
       ? 'h-8'
@@ -112,7 +114,7 @@
   }
 </script>
 
-<div class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full'>
   <div class={containerClass}>
     <input
       bind:this={inputRef}

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

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

package/dist/components/primitives/Progress.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ProgressProps } from '../../types.js'
-  import { cn, getProgressVariantClass } from '../../utils.js'
+  import type { DataAttributes, ProgressProps } from '../../types.js'
+  import { cn, getDataAttributes, getProgressVariantClass } from '../../utils.js'
 
   const {
     value,
@@ -18,8 +18,10 @@
     variant = 'primary',
     showLabel = false,
     class: className = '',
-  }: ProgressProps = $props()
+    ...restProps
+  }: ProgressProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeMap = {
     'xs': 'h-1',
     'sm': 'h-2',
@@ -43,7 +45,7 @@
   )
 </script>
 
-<div class='w-full'>
+<div {...dataAttributes} class='w-full'>
   <progress
     class={progressClass}
     {value}

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

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

package/dist/components/primitives/Radio.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts' generics="T = string">
-  import type { RadioProps, SelectOption } from '../../types.js'
-  import { cn, getSizeClass } from '../../utils.js'
+  import type { DataAttributes, RadioProps, SelectOption } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     value = $bindable() as T,
@@ -20,8 +20,10 @@
     direction = 'vertical',
     class: className = '',
     onchange,
-  }: RadioProps<T> = $props()
+    ...restProps
+  }: RadioProps<T> & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const containerClass = $derived(
     cn(
       'flex gap-2',
@@ -43,7 +45,7 @@
   }
 </script>
 
-<div class={containerClass} role='radiogroup'>
+<div {...dataAttributes} class={containerClass} role='radiogroup'>
   {#each options as option (option.value)}
     <label class='label cursor-pointer gap-2 justify-start'>
       <input

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

@@ -1,6 +1,6 @@
-import type { RadioProps } from '../../types.js';
+import type { DataAttributes, RadioProps } from '../../types.js';
 declare function $$render<T = string>(): {
-    props: RadioProps<T>;
+    props: RadioProps<T> & DataAttributes;
     exports: {};
     bindings: "value";
     slots: {};