@h-ai/ui 0.1.0-alpha.33 → 0.1.0-alpha.35

package/README.md

@@ -187,11 +187,11 @@ components/
 
 #### Bits UI headless 交互
 
-| 组件         | 描述                        | 主要属性                                            |
-| ------------ | --------------------------- | --------------------------------------------------- |
-| `Combobox`   | 可搜索下拉选择（单选/多选） | `options`, `value`, `multiple`, `placeholder`       |
-| `Calendar`   | 独立日历                    | `value: DateValue`, `minValue`, `maxValue`          |
-| `DatePicker` | 日期输入+弹出               | `value: DateValue`, `minValue`, `maxValue`, `error` |
+| 组件         | 描述                        | 主要属性                                                    |
+| ------------ | --------------------------- | ----------------------------------------------------------- |
+| `Combobox`   | 可搜索下拉选择（单选/多选） | `options`, `value`, `multiple`, `placeholder`, `size`       |
+| `Calendar`   | 独立日历                    | `value: DateValue`, `minValue`, `maxValue`                  |
+| `DatePicker` | 日期输入+弹出               | `value: DateValue`, `minValue`, `maxValue`, `error`, `size` |
 
 > 日期值使用 `@internationalized/date` 的 `DateValue` / `CalendarDate` 类型。
 
@@ -309,6 +309,25 @@ components/
 />
 ```
 
+#### Charts 图表
+
+`Chart type='line'` 默认透传 LayerChart 原生折线图；需要监控看板常见的“分段线 + 圆点 + 最近点 hover + 竖向参考线”时，使用 `lineVariant='segmented-point'`：
+
+```svelte
+<Chart
+  type='line'
+  data={trendData}
+  x='label'
+  y={['rateLimit', 'circuitBreak']}
+  series={trendSeries}
+  lineVariant='segmented-point'
+  tooltipMode='nearest'
+  showCrosshair
+  legend
+  grid
+/>
+```
+
 #### CRUD 场景（5 个）
 
 | 组件                 | 描述         | 主要属性 / 能力 |

package/auto-import.js

@@ -232,9 +232,9 @@ function autoImportHaiUi() {
         return { code: content }
       }
 
-      // 跳过 @h-ai/ui 包自身的文件，避免重复导入
+      // 自动导入只服务应用源码；第三方依赖和 @h-ai/ui 自身必须保持原样，避免改写依赖内部的同名组件。
       const normalizedPath = filename.replace(WINDOWS_PATH_SEPARATOR_REGEX, '/')
-      if (normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
+      if (normalizedPath.includes('/node_modules/') || normalizedPath.includes('/packages/ui/') || normalizedPath.includes('/@h-ai/ui/')) {
         return { code: content }
       }
 

package/dist/components/compounds/Combobox.svelte

@@ -8,6 +8,7 @@
   @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
   @prop {boolean} multiple - 是否多选模式
   @prop {string} placeholder - 输入框占位符
+  @prop {Size} size - 输入框尺寸
   @prop {boolean} disabled - 是否禁用
   @prop {string} error - 错误消息
   @prop {string} label - 表单标签
@@ -33,10 +34,11 @@
   />
 -->
 <script lang='ts'>
-  import type { DataAttributes } from '../../types.js'
+  import type { DataAttributes, Size } from '../../types.js'
   import { Combobox } from 'bits-ui'
   import { uiM } from '../../messages.js'
   import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
   import BareButton from '../primitives/BareButton.svelte'
 
   /** 选项定义 */
@@ -60,6 +62,8 @@
     multiple?: boolean
     /** 输入框占位符 */
     placeholder?: string
+    /** 尺寸 */
+    size?: Size
     /** 是否禁用 */
     disabled?: boolean
     /** 错误消息 */
@@ -77,6 +81,7 @@
     value = $bindable(),
     multiple = false,
     placeholder = '',
+    size = 'md',
     disabled = false,
     error,
     label: fieldLabel,
@@ -86,6 +91,7 @@
   }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
   // 为未提供 value 时设置初始默认值（仅在初始化时执行一次）
   // 统一以空字符串初始化，避免在初始化阶段捕获 multiple 的初始值。
   // 多选模式会通过 multiVal 派生为 [] 传给 Combobox.Root。
@@ -214,7 +220,8 @@
       <div class='relative'>
         <div
           class={cn(
-            'min-h-10 rounded-lg border bg-base-100 flex flex-wrap gap-1.5 items-center py-1.5 pl-2.5 pr-9 transition-[border-color,box-shadow] duration-150',
+            'rounded-lg border bg-base-100 flex flex-wrap gap-1.5 items-center py-1 pl-2.5 pr-9 transition-[border-color,box-shadow] duration-150',
+            sizeClasses.minHeight,
             disabled ? 'opacity-50 cursor-not-allowed bg-base-200' : 'cursor-text',
             controlStateClass,
           )}
@@ -237,7 +244,7 @@
 
           <Combobox.Input
             bind:ref={inputRef}
-            class='flex-1 min-w-20 bg-transparent py-0.5 text-sm outline-none placeholder:text-base-content/40'
+            class={cn('flex-1 min-w-20 bg-transparent py-0.5 outline-none placeholder:text-base-content/40', sizeClasses.spacing)}
             placeholder={selectedOptions.length === 0 ? placeholder : ''}
             {disabled}
             oninput={handleInput}
@@ -307,7 +314,8 @@
         <Combobox.Input
           bind:ref={inputRef}
           class={cn(
-            'h-10 w-full rounded-lg border bg-base-100 pl-3 pr-9 text-sm outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-base-content/40',
+            'w-full rounded-lg border bg-base-100 pr-9 outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-base-content/40',
+            sizeClasses.control,
             controlStateClass,
             disabled && 'opacity-50 cursor-not-allowed',
           )}

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

@@ -1,4 +1,4 @@
-import type { DataAttributes } from '../../types.js';
+import type { DataAttributes, Size } from '../../types.js';
 import { Combobox } from 'bits-ui';
 /** 选项定义 */
 interface Option {
@@ -20,6 +20,8 @@ interface Props {
     multiple?: boolean;
     /** 输入框占位符 */
     placeholder?: string;
+    /** 尺寸 */
+    size?: Size;
     /** 是否禁用 */
     disabled?: boolean;
     /** 错误消息 */
@@ -42,6 +44,7 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {string | string[]} value - 选中值（双向绑定，单选为 string，多选为 string[]）
  * @prop {boolean} multiple - 是否多选模式
  * @prop {string} placeholder - 输入框占位符
+ * @prop {Size} size - 输入框尺寸
  * @prop {boolean} disabled - 是否禁用
  * @prop {string} error - 错误消息
  * @prop {string} label - 表单标签

package/dist/components/compounds/DatePicker.svelte

@@ -7,6 +7,7 @@
   @prop {DateValue} minValue - 最小可选日期
   @prop {DateValue} maxValue - 最大可选日期
   @prop {string} placeholder - 输入框占位文本
+  @prop {Size} size - 输入框尺寸
   @prop {boolean} disabled - 是否禁用
   @prop {string} error - 错误消息
   @prop {function} onchange - 日期变更回调
@@ -22,9 +23,10 @@
 -->
 <script lang='ts'>
   import type { DateValue } from '@internationalized/date'
-  import type { DataAttributes } from '../../types.js'
+  import type { DataAttributes, Size } from '../../types.js'
   import { DatePicker as BitsDatePicker } from 'bits-ui'
-  import { getDataAttributes } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   interface Props {
     /** 选中日期（双向绑定） */
@@ -39,6 +41,8 @@
     isDateUnavailable?: (date: DateValue) => boolean
     /** 是否禁用 */
     disabled?: boolean
+    /** 尺寸 */
+    size?: Size
     /** 错误消息 */
     error?: string
     /** 自定义类名 */
@@ -54,6 +58,7 @@
     weekStartsOn = 1,
     isDateUnavailable,
     disabled = false,
+    size = 'md',
     error,
     class: className = '',
     onchange,
@@ -61,6 +66,7 @@
   }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 </script>
 
 <div {...dataAttributes} class='fieldset w-full {className}'>
@@ -73,12 +79,21 @@
     {disabled}
     onValueChange={v => onchange?.(v)}
   >
-    <BitsDatePicker.Input class="input flex items-center gap-0.5 pr-2 {error ? 'input-error' : ''}">
+    <BitsDatePicker.Input
+      class={cn(
+        'flex w-full items-center gap-0.5 rounded-lg border bg-base-100 pr-2 transition-[border-color,box-shadow] duration-150',
+        sizeClasses.control,
+        error
+          ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
+          : 'border-base-content/15 hover:border-base-content/25 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+        disabled && 'cursor-not-allowed opacity-50',
+      )}
+    >
       {#snippet children({ segments })}
         {#each segments as { part, value: segValue }, index (`${part}-${index}`)}
           <BitsDatePicker.Segment
             {part}
-            class='rounded px-0.5 py-0.5 text-sm tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
+            class='rounded px-0.5 py-0.5 tabular-nums focus:bg-primary focus:text-primary-content focus:outline-none data-[type=literal]:px-0 data-[type=literal]:text-base-content/50'
           >
             {segValue}
           </BitsDatePicker.Segment>

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

@@ -1,5 +1,5 @@
 import type { DateValue } from '@internationalized/date';
-import type { DataAttributes } from '../../types.js';
+import type { DataAttributes, Size } from '../../types.js';
 interface Props {
     /** 选中日期（双向绑定） */
     value?: DateValue;
@@ -13,6 +13,8 @@ interface Props {
     isDateUnavailable?: (date: DateValue) => boolean;
     /** 是否禁用 */
     disabled?: boolean;
+    /** 尺寸 */
+    size?: Size;
     /** 错误消息 */
     error?: string;
     /** 自定义类名 */
@@ -30,6 +32,7 @@ type $$ComponentProps = Props & DataAttributes;
  * @prop {DateValue} minValue - 最小可选日期
  * @prop {DateValue} maxValue - 最大可选日期
  * @prop {string} placeholder - 输入框占位文本
+ * @prop {Size} size - 输入框尺寸
  * @prop {boolean} disabled - 是否禁用
  * @prop {string} error - 错误消息
  * @prop {function} onchange - 日期变更回调

package/dist/components/compounds/TagInput.svelte

@@ -10,7 +10,8 @@
 <script lang='ts'>
   import type { DataAttributes, TagInputProps } from '../../types.js'
   import { uiM } from '../../messages.js'
-  import { cn, getDataAttributes, getInputSizeClass } from '../../utils.js'
+  import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
   import BareInput from '../primitives/BareInput.svelte'
   import Tag from '../primitives/Tag.svelte'
 
@@ -27,6 +28,7 @@
   }: TagInputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
   let inputValue = $state('')
   let inputElement = $state<HTMLInputElement | undefined>(undefined)
 
@@ -34,9 +36,10 @@
 
   const containerClass = $derived(
     cn(
-      'input flex flex-wrap items-center gap-1 min-h-[2.5rem] h-auto py-1',
-      getInputSizeClass(size),
-      disabled && 'input-disabled',
+      'flex h-auto w-full flex-wrap items-center gap-1 rounded-lg border border-base-content/15 bg-base-100 py-1 transition-[border-color,box-shadow] duration-150 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
+      sizeClasses.minHeight,
+      sizeClasses.spacing,
+      disabled && 'cursor-not-allowed opacity-50',
       className,
     ),
   )
@@ -79,32 +82,34 @@
   }
 </script>
 
-<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
-      text={tag}
-      size='sm'
-      closable={!disabled}
-      onclose={() => removeTag(index)}
-    />
-  {/each}
+<div {...dataAttributes} class='fieldset w-full'>
+  <div
+    class={containerClass}
+    onclick={() => inputElement?.focus()}
+    onkeydown={e => e.key === 'Enter' && inputElement?.focus()}
+    role='textbox'
+    tabindex='-1'
+  >
+    {#each tags as tag, index (index)}
+      <Tag
+        text={tag}
+        size='sm'
+        closable={!disabled}
+        onclose={() => removeTag(index)}
+      />
+    {/each}
 
-  {#if canAddMore && !disabled}
-    <BareInput
-      type='text'
-      class='flex-1 min-w-[100px] bg-transparent border-none outline-none text-sm'
-      bind:value={inputValue}
-      bind:inputRef={inputElement}
-      placeholder={displayPlaceholder}
-      {disabled}
-      onkeydown={handleKeydown}
-      onblur={handleBlur}
-    />
-  {/if}
+    {#if canAddMore && !disabled}
+      <BareInput
+        type='text'
+        class='flex-1 min-w-[100px] bg-transparent border-none outline-none'
+        bind:value={inputValue}
+        bind:inputRef={inputElement}
+        placeholder={displayPlaceholder}
+        {disabled}
+        onkeydown={handleKeydown}
+        onblur={handleBlur}
+      />
+    {/if}
+  </div>
 </div>

package/dist/components/control-size.d.ts

@@ -0,0 +1,18 @@
+import type { Size } from '../types.js';
+interface FormControlSizeClasses {
+    /** 固定高度，适用于单行控件 */
+    height: string;
+    /** 最小高度，适用于内容可换行的控件 */
+    minHeight: string;
+    /** 水平内边距与字号 */
+    spacing: string;
+    /** 固定高度、水平内边距与字号的完整组合 */
+    control: string;
+}
+/**
+ * 获取输入类控件的统一尺寸类名。
+ *
+ * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ */
+export declare function getFormControlSizeClasses(size: Size): FormControlSizeClasses;
+export {};

package/dist/components/control-size.js

@@ -0,0 +1,18 @@
+const FORM_CONTROL_SIZE_CLASSES = {
+    'xs': { height: 'h-8', minHeight: 'min-h-8', spacing: 'px-2.5 text-xs', control: 'h-8 px-2.5 text-xs' },
+    'sm': { height: 'h-9', minHeight: 'min-h-9', spacing: 'px-3 text-sm', control: 'h-9 px-3 text-sm' },
+    'md': { height: 'h-10', minHeight: 'min-h-10', spacing: 'px-3 text-sm', control: 'h-10 px-3 text-sm' },
+    'lg': { height: 'h-12', minHeight: 'min-h-12', spacing: 'px-4 text-base', control: 'h-12 px-4 text-base' },
+    'xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '2xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '3xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+    '4xl': { height: 'h-14', minHeight: 'min-h-14', spacing: 'px-4 text-lg', control: 'h-14 px-4 text-lg' },
+};
+/**
+ * 获取输入类控件的统一尺寸类名。
+ *
+ * 仅供组件内部复用，确保 Input、Select 与复合输入控件使用同一盒模型。
+ */
+export function getFormControlSizeClasses(size) {
+    return FORM_CONTROL_SIZE_CLASSES[size];
+}

package/dist/components/primitives/Input.svelte

@@ -5,6 +5,7 @@
 <script lang='ts'>
   import type { DataAttributes, InputProps } from '../../types.js'
   import { cn, getDataAttributes } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   let {
     value = $bindable(''),
@@ -39,29 +40,7 @@
   }: InputProps & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
-  const containerHeight = $derived(
-    size === 'xs'
-      ? 'h-8'
-      : size === 'sm'
-      ? 'h-9'
-      : size === 'lg'
-      ? 'h-12'
-      : size === 'xl'
-      ? 'h-14'
-      : 'h-10',
-  )
-
-  const inputSpacingClass = $derived(
-    size === 'xs'
-      ? 'px-2.5 text-xs'
-      : size === 'sm'
-      ? 'px-3 text-sm'
-      : size === 'lg'
-      ? 'px-4 text-base'
-      : size === 'xl'
-      ? 'px-4 text-lg'
-      : 'px-3 text-sm',
-  )
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   const inputTypeClass = $derived(
     type === 'number'
@@ -72,7 +51,7 @@
   const containerClass = $derived(
     cn(
       'flex items-center w-full rounded-lg border bg-base-100',
-      containerHeight,
+      sizeClasses.height,
       error
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : 'border-base-content/15 focus-within:border-primary/50 focus-within:ring-2 focus-within:ring-primary/10',
@@ -136,7 +115,7 @@
       autocomplete={autocomplete as HTMLInputElement['autocomplete']}
       class={cn(
         'flex-1 h-full bg-transparent border-none outline-none placeholder:text-base-content/35',
-        inputSpacingClass,
+        sizeClasses.spacing,
         inputTypeClass,
       )}
       bind:value

package/dist/components/primitives/Select.svelte

@@ -11,6 +11,7 @@
 <script lang='ts' generics="T = string">
   import type { DataAttributes, SelectProps } from '../../types.js'
   import { cn, getDataAttributes, portal } from '../../utils.js'
+  import { getFormControlSizeClasses } from '../control-size.js'
 
   let {
     value = $bindable<T>(),
@@ -39,14 +40,7 @@
   // 下拉层定位样式（portal 到 body，用 fixed 逃逸 overflow/stacking）
   let dropdownStyle = $state('')
 
-  // 尺寸映射（与 Input 保持一致）
-  const sizeClasses: Record<string, string> = {
-    xs: 'h-8 text-xs px-2.5',
-    sm: 'h-9 text-sm px-3',
-    md: 'h-10 text-sm px-3',
-    lg: 'h-12 text-base px-4',
-    xl: 'h-14 text-lg px-4',
-  }
+  const sizeClasses = $derived(getFormControlSizeClasses(size))
 
   // 选项文字尺寸
   const optionTextClass = $derived(
@@ -81,7 +75,7 @@
   const wrapperClass = $derived(
     cn(
       'relative flex w-full min-w-0 items-center rounded-lg border bg-base-100 cursor-pointer',
-      sizeClasses[size] || sizeClasses.md,
+      sizeClasses.control,
       error
         ? 'border-error/60 focus-within:ring-2 focus-within:ring-error/15'
         : isDropdownOpen
@@ -270,7 +264,7 @@
     {/if}
 
     <!-- 右侧图标区域 -->
-    <div class='flex items-center pr-2 shrink-0'>
+    <div class='flex items-center shrink-0'>
       {#if showClear}
         <button
           type='button'