@teamix-evo/ui 0.7.1 → 0.7.2

package/src/components/checkbox/meta.md

@@ -128,6 +128,27 @@ CheckboxGroup 纵向排列。
 />
 ```
 
+### GroupControlled
+
+CheckboxGroup 受控用法 + onChange 回调。
+
+```tsx
+<div className="flex flex-col gap-2">
+  <CheckboxGroup
+    value={value}
+    onChange={setValue}
+    dataSource={[
+      { value: 'apple', label: '苹果' },
+      { value: 'banana', label: '香蕉' },
+      { value: 'orange', label: '橙子' },
+    ]}
+  />
+  <div className="text-xs text-muted-foreground">
+    已选：{value.join(', ') || '无'}
+  </div>
+</div>
+```
+
 ### GroupDisabled
 
 CheckboxGroup 整组禁用。
@@ -164,3 +185,29 @@ CheckboxGroup children 模式：自由组合 Checkbox 子元素，仍由 group
   </label>
 </CheckboxGroup>
 ```
+
+### CheckAll
+
+全选 / 半选 / 反选联动。
+
+```tsx
+<div className="flex flex-col gap-3">
+  <label className="inline-flex cursor-pointer items-center gap-2 text-xs">
+    <Checkbox
+      checked={allChecked}
+      indeterminate={indeterminate}
+      onCheckedChange={(c) => setValue(c === true ? options : [])}
+    />
+    <span>全选</span>
+  </label>
+  <CheckboxGroup
+    value={value}
+    onChange={setValue}
+    dataSource={[
+      { value: 'apple', label: '苹果' },
+      { value: 'banana', label: '香蕉' },
+      { value: 'orange', label: '橙子' },
+    ]}
+  />
+</div>
+```

package/src/components/color-picker/index.tsx

@@ -48,7 +48,7 @@ type ColorPresets = string[] | ColorPresetGroup[];
 // ─── Trigger variants ──────────────────────────────────────────────────────
 
 const triggerVariants = cva(
-  'inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-background transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-background transition-colors hover:border-ring focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       size: {
@@ -432,7 +432,7 @@ function PresetGrid({
           type="button"
           onClick={() => onSelect(hex)}
           className={cn(
-            'size-5 cursor-pointer rounded-sm border border-border transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            'size-5 cursor-pointer rounded-sm border border-border transition-transform hover:scale-110 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none',
             currentColor.toHex() === new Color(hex).toHex() &&
               'ring-1 ring-ring ring-offset-1',
           )}
@@ -628,7 +628,7 @@ function ColorPicker({
             <button
               type="button"
               onClick={cycleFormat}
-              className="h-6 shrink-0 cursor-pointer rounded-sm px-1.5 text-xs font-medium uppercase text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+              className="h-6 shrink-0 cursor-pointer rounded-sm px-1.5 text-xs font-medium text-muted-foreground uppercase transition-colors hover:bg-muted hover:text-foreground"
             >
               {currentFormat}
             </button>

package/src/components/color-picker/meta.md

@@ -40,6 +40,18 @@
 
 ## 示例
 
+### Basic
+
+```tsx
+<ColorPicker />
+```
+
+### DefaultValue
+
+```tsx
+<ColorPicker defaultValue="#52c41a" />
+```
+
 ### Sizes
 
 ```tsx
@@ -72,6 +84,68 @@
 </div>
 ```
 
+### DisabledAlpha
+
+```tsx
+<ColorPicker disabledAlpha defaultValue="#1677ff" />
+```
+
+### AllowClear
+
+```tsx
+<ColorPicker allowClear defaultValue="#faad14" />
+```
+
+### PresetFlat
+
+```tsx
+<ColorPicker defaultValue="#1677ff" presets={[
+      '#f5222d'} '#fa541c'={'#fa541c'} '#fa8c16'={'#fa8c16'} '#faad14'={'#faad14'} '#fadb14'={'#fadb14'} '#a0d911'={'#a0d911'} '#52c41a'={'#52c41a'} '#13c2c2'={'#13c2c2'} '#1677ff'={'#1677ff'} '#2f54eb'={'#2f54eb'} '#722ed1'={'#722ed1'} '#eb2f96'={'#eb2f96'} ]={]} />
+```
+
+### PresetGroups
+
+```tsx
+<ColorPicker defaultValue="#1677ff" presets={[
+      {
+        label: '推荐色'} colors={['#f5222d'} '#fa8c16'={'#fa8c16'} '#fadb14'={'#fadb14'} '#52c41a'={'#52c41a'} '#1677ff'={'#1677ff'} '#722ed1']={'#722ed1']} }={}} {
+        label: '中性色'={{
+        label: '中性色'} colors={['#000000'} '#434343'={'#434343'} '#8c8c8c'={'#8c8c8c'} '#bfbfbf'={'#bfbfbf'} '#d9d9d9'={'#d9d9d9'} '#ffffff']={'#ffffff']} defaultOpen={false} }={}} ]={]} />
+```
+
+### Controlled
+
+```tsx
+<div className="flex items-center gap-3">
+  <ColorPicker
+    value={color}
+    onChange={(c) => setColor(c)}
+    showText
+  />
+  <Button
+    variant="outline"
+    size="sm"
+    onClick={() => setColor(new Color('#ff4d4f'))}
+  >
+    设为红色
+  </Button>
+</div>
+```
+
+### OnChangeComplete
+
+```tsx
+<div className="flex items-center gap-3">
+  <ColorPicker
+    defaultValue="#1677ff"
+    onChangeComplete={(c) => setHex(c.toHex())}
+  />
+  <span className="text-xs text-muted-foreground">
+    完成选色: {hex}
+  </span>
+</div>
+```
+
 ### CustomTrigger
 
 ```tsx
@@ -81,3 +155,9 @@
   </Button>
 </ColorPicker>
 ```
+
+### Disabled
+
+```tsx
+<ColorPicker disabled defaultValue="#faad14" />
+```

package/src/components/combobox/index.tsx

@@ -372,7 +372,7 @@ function ComboboxTrigger({
         }}
         className={cn(
           // 视觉与 SelectTrigger 对齐；focus-within 产生 ring；min-h 容纳多行 Tag
-          "flex w-fit cursor-text items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-1 pr-2 pl-2.5 text-xs transition-colors outline-none has-[input:focus]:border-ring has-[input:focus]:ring-ring/20 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[size=default]:min-h-8 data-[size=sm]:min-h-7 data-[size=lg]:min-h-9 data-[size=lg]:text-sm aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "flex w-fit cursor-text items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-1 pr-2 pl-2.5 text-xs transition-colors outline-none has-[input:focus]:border-ring has-[input:focus]:ring-ring/20 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[size=default]:min-h-8 data-[size=lg]:min-h-9 data-[size=lg]:text-sm data-[size=sm]:min-h-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
           className,
         )}
         {...props}
@@ -670,7 +670,7 @@ function ComboboxItem({
       }}
       className={cn(
         // 与 SelectItem 视觉对齐：h-8、左侧勾选位；hover 灰底，选中蓝底（含 hover 保持）
-        "group/combobox-item relative flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 pl-7 text-xs outline-hidden select-none hover:bg-muted data-[state=checked]:bg-primary/10 data-[state=checked]:hover:bg-primary/10 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/combobox-item relative flex h-8 w-full cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 pl-7 text-xs outline-hidden select-none hover:bg-muted data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[state=checked]:bg-primary/10 data-[state=checked]:hover:bg-primary/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/combobox/meta.md

@@ -30,6 +30,136 @@
 
 ## 示例
 
+### Multiple
+
+多选：选中项以可关闭 Tag 形式展示在触发区。
+
+```tsx
+<Combobox multiple value={value} onValueChange={setValue}>
+  <ComboboxTrigger
+    className="w-72"
+    onClear={value.length ? () => setValue([]) : undefined}
+  >
+    <ComboboxValue placeholder="选择多个城市" />
+  </ComboboxTrigger>
+  <ComboboxContent>
+    <ComboboxList>
+      <ComboboxEmpty>无匹配结果</ComboboxEmpty>
+      <ComboboxGroup>
+        {cityOptions.map((o) => (
+          <ComboboxItem key={o.value} value={o.value}>
+            {o.label}
+          </ComboboxItem>
+        ))}
+      </ComboboxGroup>
+    </ComboboxList>
+  </ComboboxContent>
+</Combobox>
+```
+
+### WithMaxTagCount
+
+多选模式下通过 `maxTagCount` 控制选择的个数，通过 `maxTagPlaceholder` 控制选择的 hover 样式。
+
+```tsx
+<div className="flex flex-wrap items-start gap-3">
+  {/* 默认 +N */}
+  <Combobox multiple maxTagCount={2} value={v1} onValueChange={setV1}>
+    <ComboboxTrigger className="w-60">
+      <ComboboxValue placeholder="选择城市" />
+    </ComboboxTrigger>
+    <ComboboxContent>
+      <ComboboxList>
+        <ComboboxGroup>
+          {cityOptions.map((o) => (
+            <ComboboxItem key={o.value} value={o.value}>
+              {o.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxContent>
+  </Combobox>
+  {/* 自定义摘要 wrapped in Tag */}
+  <Combobox
+    multiple
+    maxTagCount={2}
+    maxTagPlaceholder={(_omitted, total) => (
+      <Tag size="sm" variant="solid" color="primary">
+        已选择 {total}/{cityOptions.length} 项
+      </Tag>
+    )}
+    value={v2}
+    onValueChange={setV2}
+  >
+    <ComboboxTrigger className="w-60">
+      <ComboboxValue placeholder="选择城市" />
+    </ComboboxTrigger>
+    <ComboboxContent>
+      <ComboboxList>
+        <ComboboxGroup>
+          {cityOptions.map((o) => (
+            <ComboboxItem key={o.value} value={o.value}>
+              {o.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxContent>
+  </Combobox>
+  {/* 简洁 x/total 纯文本 */}
+  <Combobox
+    multiple
+    maxTagCount={2}
+    maxTagPlaceholder={(_omitted, total) =>
+      `${total}/${cityOptions.length}`
+    }
+    value={v3}
+    onValueChange={setV3}
+  >
+    <ComboboxTrigger className="w-60">
+      <ComboboxValue placeholder="选择城市" />
+    </ComboboxTrigger>
+    <ComboboxContent>
+      <ComboboxList>
+        <ComboboxGroup>
+          {cityOptions.map((o) => (
+            <ComboboxItem key={o.value} value={o.value}>
+              {o.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxContent>
+  </Combobox>
+  {/* maxTagCount=1 + 纯文本摘要 */}
+  <Combobox
+    multiple
+    maxTagCount={1}
+    maxTagPlaceholder={(_omitted, total) =>
+      `已选择 ${total}/${cityOptions.length} 项`
+    }
+    value={v4}
+    onValueChange={setV4}
+  >
+    <ComboboxTrigger className="w-60">
+      <ComboboxValue placeholder="选择城市" />
+    </ComboboxTrigger>
+    <ComboboxContent>
+      <ComboboxList>
+        <ComboboxGroup>
+          {cityOptions.map((o) => (
+            <ComboboxItem key={o.value} value={o.value}>
+              {o.label}
+            </ComboboxItem>
+          ))}
+        </ComboboxGroup>
+      </ComboboxList>
+    </ComboboxContent>
+  </Combobox>
+</div>
+```
+
 ### Disabled
 
 禁用态。

package/src/components/data-table/index.tsx

@@ -1289,7 +1289,7 @@ function DataTable<T = Record<string, unknown>>(props: DataTableProps<T>) {
             data-slot="data-table-expanded-row"
             className="bg-muted/20 hover:bg-muted/20"
           >
-            <TableCell colSpan={colCount} className="whitespace-normal py-3">
+            <TableCell colSpan={colCount} className="py-3 whitespace-normal">
               {expandable!.expandedRowRender(row.original, row.index)}
             </TableCell>
           </TableRow>
@@ -1462,7 +1462,7 @@ function DataTable<T = Record<string, unknown>>(props: DataTableProps<T>) {
                       onTouchStart={header.getResizeHandler()}
                       onClick={(e) => e.stopPropagation()}
                       className={cn(
-                        'absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none bg-transparent transition-colors hover:bg-primary/40',
+                        'absolute top-0 right-0 z-10 h-full w-1 cursor-col-resize touch-none bg-transparent transition-colors select-none hover:bg-primary/40',
                         header.column.getIsResizing() && 'bg-primary',
                       )}
                     />