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

package/dist/components/compounds/SafeArea.svelte

@@ -8,7 +8,8 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   interface Props {
     /** 安全区域位置 */
@@ -23,8 +24,10 @@
     position = 'all',
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const positionClasses = $derived({
     top: 'hai-safe-top',
     bottom: 'hai-safe-bottom',
@@ -32,6 +35,6 @@
   }[position])
 </script>
 
-<div class={cn(positionClasses, className)}>
+<div {...dataAttributes} class={cn(positionClasses, className)}>
   {@render children()}
 </div>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 interface Props {
     /** 安全区域位置 */
     position?: 'top' | 'bottom' | 'all';
@@ -7,6 +8,7 @@ interface Props {
     /** 内容 */
     children: Snippet;
 }
-declare const SafeArea: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & DataAttributes;
+declare const SafeArea: import("svelte").Component<$$ComponentProps, {}, "">;
 type SafeArea = ReturnType<typeof SafeArea>;
 export default SafeArea;

package/dist/components/compounds/Skeleton.svelte

@@ -3,8 +3,8 @@
   骨架屏占位组件，用于加载状态展示。
 -->
 <script lang='ts'>
-  import type { SkeletonProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, SkeletonProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     variant = 'text',
@@ -14,8 +14,10 @@
     animation = true,
     count = 1,
     class: className = '',
-  }: SkeletonProps = $props()
+    ...restProps
+  }: SkeletonProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const baseClass = $derived(
     cn(
       'skeleton',
@@ -40,7 +42,7 @@
 </script>
 
 {#if count > 1}
-  <div class='space-y-2'>
+  <div {...dataAttributes} class='space-y-2'>
     {#each Array.from({ length: count }) as _, i (i)}
       <div class={baseClass} {style}></div>
     {/each}

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

@@ -1,8 +1,9 @@
-import type { SkeletonProps } from '../../types.js';
+import type { DataAttributes, SkeletonProps } from '../../types.js';
+type $$ComponentProps = SkeletonProps & DataAttributes;
 /**
  * Skeleton
  * 骨架屏占位组件，用于加载状态展示。
  */
-declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/compounds/Steps.svelte

@@ -8,8 +8,8 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { StepsProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, StepsProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   const {
     items = [],
@@ -19,8 +19,10 @@
     clickable = false,
     class: className = '',
     onchange,
-  }: StepsProps = $props()
+    ...restProps
+  }: StepsProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   const containerClass = $derived(
     cn(
       'steps',
@@ -62,7 +64,7 @@
   }
 </script>
 
-<ul class={containerClass}>
+<ul {...dataAttributes} class={containerClass}>
   {#each items as item, index (index)}
     {#if clickable}
       <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->

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

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

package/dist/components/compounds/SwipeCell.svelte

@@ -13,8 +13,9 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
+  import type { DataAttributes } from '../../types.js'
   import type { SwipeCellAction } from './swipe-cell-types.js'
-  import { cn } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
 
   // eslint-disable-next-line no-import-assign -- type re-export
   export type { SwipeCellAction }
@@ -38,8 +39,10 @@
     disabled = false,
     class: className,
     children,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let offsetX = $state(0)
   let startX = 0
   let swiping = false
@@ -82,7 +85,7 @@
   }
 </script>
 
-<div class={cn('relative overflow-hidden', className)}>
+<div {...dataAttributes} class={cn('relative overflow-hidden', className)}>
   <!-- 内容层 -->
   <div
     class='relative transition-transform'

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../types.js';
 import type { SwipeCellAction } from './swipe-cell-types.js';
 interface Props {
     /** 右侧操作列表 */
@@ -12,7 +13,8 @@ interface Props {
     /** 内容 */
     children: Snippet;
 }
-declare const SwipeCell: import("svelte").Component<Props, {
+type $$ComponentProps = Props & DataAttributes;
+declare const SwipeCell: import("svelte").Component<$$ComponentProps, {
     SwipeCellAction: typeof SwipeCellAction;
 }, "">;
 type SwipeCell = ReturnType<typeof SwipeCell>;

package/dist/components/compounds/Tabs.svelte

@@ -3,8 +3,8 @@
   标签页组件，支持 line/card/pills 三种样式。
 -->
 <script lang='ts'>
-  import type { TabsProps } from '../../types.js'
-  import { cn } from '../../utils.js'
+  import type { DataAttributes, TabsProps } from '../../types.js'
+  import { cn, getDataAttributes } from '../../utils.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   let {
@@ -15,8 +15,10 @@
     class: className = '',
     onchange,
     children,
-  }: TabsProps = $props()
+    ...restProps
+  }: TabsProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 默认选中第一个
   $effect(() => {
     if (!active && items.length > 0) {
@@ -56,7 +58,7 @@
   }
 </script>
 
-<div role='tablist' class={tabsClass}>
+<div {...dataAttributes} role='tablist' class={tabsClass}>
   {#each items as item (item.key)}
     <BareButton
       role='tab'

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

@@ -1,8 +1,9 @@
-import type { TabsProps } from '../../types.js';
+import type { DataAttributes, TabsProps } from '../../types.js';
+type $$ComponentProps = TabsProps & DataAttributes;
 /**
  * Tabs
  * 标签页组件，支持 line/card/pills 三种样式。
  */
-declare const Tabs: import("svelte").Component<TabsProps, {}, "active">;
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "active">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/compounds/TagInput.svelte

@@ -8,9 +8,9 @@
   =============================================================================
 -->
 <script lang='ts'>
-  import type { TagInputProps } from '../../types.js'
+  import type { DataAttributes, TagInputProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getInputSizeClass } from '../../utils.js'
+  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
   import BareInput from '../primitives/BareInput.svelte'
   import Tag from '../primitives/Tag.svelte'
 
@@ -23,8 +23,10 @@
     size = 'md',
     class: className = '',
     onchange,
-  }: TagInputProps = $props()
+    ...restProps
+  }: TagInputProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let inputValue = $state('')
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
 
@@ -77,12 +79,12 @@
   }
 </script>
 
-<div
-  class={containerClass}
-  onclick={() => inputElement?.focus()}
-  onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
-  role='textbox'
-  tabindex='-1'
+<div {...dataAttributes}
+     class={containerClass}
+     onclick={() => inputElement?.focus()}
+     onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
+     role='textbox'
+     tabindex='-1'
 >
   {#each tags as tag, index (index)}
     <Tag

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

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

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;