@h-ai/ui 0.1.0-alpha.28 → 0.1.0-alpha.30

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: {};

package/dist/components/primitives/Range.svelte

@@ -9,7 +9,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import { cn } from '../../utils.js'
+  import type { DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareInput from './BareInput.svelte'
 
   interface Props {
@@ -49,8 +50,10 @@
     onchange,
     oninput,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeClass = $derived({
     xs: 'range-xs',
     sm: 'range-sm',
@@ -94,7 +97,7 @@
   }
 </script>
 
-<div class='w-full'>
+<div {...dataAttributes} class='w-full'>
   <BareInput
     type='range'
     class={rangeClass}

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 当前值 */
     value?: number;
@@ -22,6 +23,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
-declare const Range: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Range: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Range = ReturnType<typeof Range>;
 export default Range;

package/dist/components/primitives/Rating.svelte

@@ -9,8 +9,9 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 当前评分值 (0 - max) */
@@ -49,8 +50,10 @@
     name = `rating-${Math.random().toString(36).slice(2, 9)}`,
     onchange,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeClass = $derived({
     xs: 'rating-xs',
     sm: 'rating-sm',
@@ -110,7 +113,7 @@
 
 {#if readonly}
   <!-- 只读模式 - 使用 div 而非 input -->
-  <div class={cn('rating', sizeClass, className)}>
+  <div {...dataAttributes} class={cn('rating', sizeClass, className)}>
     {#each Array.from({ length: max }) as _, i (i)}
       <div
         class={cn(

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 当前评分值 (0 - max) */
     value?: number;
@@ -22,6 +23,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
-declare const Rating: import("svelte").Component<Props, {}, "value">;
+type $$ComponentProps = Props & DataAttributes;
+declare const Rating: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Rating = ReturnType<typeof Rating>;
 export default Rating;

package/dist/components/primitives/Select.svelte

@@ -9,8 +9,8 @@
   =============================================================================
 -->
 <script lang='ts' generics="T = string">
-  import type { SelectProps } from '../../types.js'
-  import { cn, getSizeClass } from '../../utils.js'
+  import type { DataAttributes, SelectProps } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     value = $bindable<T>(),
@@ -25,8 +25,10 @@
     id,
     onchange,
     children,
-  }: SelectProps<T> = $props()
+    ...restProps
+  }: SelectProps<T> & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let selectRef: HTMLSelectElement | undefined = $state()
 
   const selectClass = $derived(
@@ -62,7 +64,7 @@
   }
 </script>
 
-<div class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full'>
   <select
     bind:this={selectRef}
     {id}

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

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

package/dist/components/primitives/Spinner.svelte

@@ -8,15 +8,17 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { SpinnerProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, SpinnerProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     size = 'md',
     variant = 'primary',
     class: className = '',
-  }: SpinnerProps = $props()
+    ...restProps
+  }: SpinnerProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const sizeMap = {
     'xs': 'loading-xs',
     'sm': 'loading-sm',
@@ -51,4 +53,4 @@
   )
 </script>
 
-<span class={spinnerClass}></span>
+<span {...dataAttributes} class={spinnerClass}></span>

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

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

package/dist/components/primitives/Switch.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { SwitchProps } from '../../types.js'
-  import { cn, generateId, getSizeClass } from '../../utils.js'
+  import type { DataAttributes, SwitchProps } from '../../types.js'
+  import { cn, generateId, getDataAttributes, getSizeClass } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -18,8 +18,10 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: SwitchProps = $props()
+    ...restProps
+  }: SwitchProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const id = generateId('switch')
 
   const hasToggleColorVariant = $derived(
@@ -41,7 +43,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/Switch.svelte.d.ts

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

package/dist/components/primitives/Tag.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TagProps } from '../../types.js'
-  import { cn, getSizeClass, getVariantClass } from '../../utils.js'
+  import type { DataAttributes, TagProps } from '../../types.js'
+  import { cn, getDataAttributes, getSizeClass, getVariantClass } from '../../utils.js'
   import IconButton from './IconButton.svelte'
 
   const {
@@ -23,8 +23,10 @@
     class: className = '',
     onclose,
     children,
-  }: TagProps = $props()
+    ...restProps
+  }: TagProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const tagClass = $derived(
     cn(
       'badge gap-1',
@@ -41,7 +43,7 @@
   }
 </script>
 
-<span class={tagClass}>
+<span {...dataAttributes} class={tagClass}>
   {#if children}
     {@render children()}
   {:else}

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

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

package/dist/components/primitives/Textarea.svelte

@@ -9,8 +9,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TextareaProps } from '../../types.js'
-  import { cn, getInputSizeClass } from '../../utils.js'
+  import type { DataAttributes, TextareaProps } from '../../types.js'
+  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
 
   let {
     value = $bindable(''),
@@ -27,8 +27,10 @@
     id,
     name,
     oninput,
-  }: TextareaProps = $props()
+    ...restProps
+  }: TextareaProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let textareaRef: HTMLTextAreaElement | undefined = $state()
 
   const textareaClass = $derived(
@@ -71,7 +73,7 @@
   }
 </script>
 
-<div class='fieldset w-full'>
+<div {...dataAttributes} class='fieldset w-full'>
   <textarea
     bind:this={textareaRef}
     {id}

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

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

package/dist/components/primitives/ToggleCheckbox.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleCheckboxProps } from '../../types.js'
+  import type { DataAttributes, ToggleCheckboxProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleCheckboxProps = $props()
+    ...restProps
+  }: ToggleCheckboxProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   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}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='checkbox'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />

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

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

package/dist/components/primitives/ToggleInput.svelte

@@ -8,7 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { ToggleCheckboxProps } from '../../types.js'
+  import type { DataAttributes, ToggleCheckboxProps } from '../../types.js'
+  import { getDataAttributes } from '../../utils.js'
 
   let {
     checked = $bindable(false),
@@ -17,20 +18,22 @@
     disabled = false,
     class: className = '',
     onchange,
-  }: ToggleCheckboxProps = $props()
+    ...restProps
+  }: ToggleCheckboxProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   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}
+<input {...dataAttributes}
+       {id}
+       {name}
+       type='checkbox'
+       class={className}
+       {disabled}
+       checked={checked}
+       onchange={handleChange}
 />