@teamix-evo/ui 0.7.0 → 0.7.2

package/src/components/switch/meta.md

@@ -85,6 +85,28 @@
 </div>
 ```
 
+### Loading
+
+加载态：`loading` 期间禁用交互，thumb 内显示自旋图标。
+
+```tsx
+<div className="flex items-center gap-4">
+  <Switch
+    checked={checked}
+    loading={loading}
+    onCheckedChange={handleChange}
+  />
+  <Switch size="sm" loading defaultChecked />
+  <Button
+    variant="outline"
+    size="sm"
+    onClick={() => handleChange(!checked)}
+  >
+    异步切换
+  </Button>
+</div>
+```
+
 ### Disabled
 
 禁用态：开/关两种。
@@ -105,3 +127,14 @@
   </div>
 </div>
 ```
+
+### Controlled
+
+受控用法：通过 `checked` + `onCheckedChange` 接管状态。
+
+```tsx
+<div className="flex items-center gap-2">
+  <Switch checked={checked} onCheckedChange={setChecked} />
+  <Label>{checked ? '开启' : '关闭'}</Label>
+</div>
+```

package/src/components/table/index.tsx

@@ -219,8 +219,8 @@ const TableRow = React.forwardRef<
       className={cn(
         'border-b border-border-subtle transition-colors',
         hoverable &&
-          'hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
-        crossline && 'group/row',
+          'group/row hover:bg-row-hover has-aria-expanded:bg-row-hover data-[state=selected]:bg-muted',
+        crossline && !hoverable && 'group/row',
         className,
       )}
       {...props}
@@ -239,7 +239,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
       className={cn(
         'text-left align-middle font-medium whitespace-nowrap',
         // md：上下 12px / 左右 16px / 行高 18px；sm：上下 8px / 左右 8px
-        size === 'sm' ? 'px-2 py-2' : 'px-4 py-3 leading-normal',
+        size === 'sm' ? 'p-2' : 'px-4 py-3 leading-normal',
         bordered &&
           '[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border/60',
         '[&:has([role=checkbox])]:pr-0',
@@ -261,7 +261,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
       className={cn(
         'align-middle whitespace-nowrap text-foreground-body',
         // md：上下 12px / 左右 16px；sm：上下 8px / 左右 8px
-        size === 'sm' ? 'px-2 py-2' : 'px-4 py-3',
+        size === 'sm' ? 'p-2' : 'px-4 py-3',
         bordered &&
           '[&:not(:last-child)]:border-r [&:not(:last-child)]:border-border/60',
         '[&:has([role=checkbox])]:pr-0',

package/src/components/table/meta.md

@@ -96,6 +96,17 @@ stickyHeader / hoverable / crossline / loading / empty / maxBodyHeight 等视觉
 </Table>
 ```
 
+### StickyHeader
+
+配合 `maxBodyHeight` 使用 `stickyHeader` 实现表头吸顶。
+
+```tsx
+<Table stickyHeader maxBodyHeight={300}>
+  {renderHeader()}
+  <TableBody>{renderRows(longList)}</TableBody>
+</Table>
+```
+
 ### Loading
 
 `loading` 显示居中蒙层；可通过 `loadingNode` 自定义。

package/src/components/tabs/index.tsx

@@ -200,7 +200,7 @@ function TabsList({
       {variant === 'line' && (
         <span
           aria-hidden
-          className="pointer-events-none absolute -z-10 bg-border bottom-0 left-0 right-0 h-px group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-px"
+          className="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-px bg-border group-data-[orientation=vertical]/tabs:top-0 group-data-[orientation=vertical]/tabs:left-auto group-data-[orientation=vertical]/tabs:h-auto group-data-[orientation=vertical]/tabs:w-px"
         />
       )}
       <TabsPrimitive.List
@@ -212,10 +212,10 @@ function TabsList({
           tabsListVariants({ variant, size }),
           // line/wrapped: 占满，capsule/text: 自适应
           (variant === 'line' || variant === 'wrapped') &&
-            'min-w-0 flex-1 overflow-x-auto scrollbar-none group-data-[orientation=vertical]/tabs:min-w-fit group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:overflow-x-visible',
+            'min-w-0 flex-1 scrollbar-none overflow-x-auto group-data-[orientation=vertical]/tabs:min-w-fit group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:overflow-x-visible',
           // overflow 隐式 clip → 加 pb-px/pr-px 给 1px 余量让 active border 完整可见
           variant === 'line' &&
-            'pb-px group-data-[orientation=vertical]/tabs:pb-0 group-data-[orientation=vertical]/tabs:pr-px',
+            'pb-px group-data-[orientation=vertical]/tabs:pr-px group-data-[orientation=vertical]/tabs:pb-0',
           className,
         )}
         {...props}
@@ -265,17 +265,17 @@ function TabsList({
 // ─── TabsTrigger ────────────────────────────────────────────────────────────
 
 const tabsTriggerVariants = cva(
-  'group/tabs-trigger relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap font-normal outline-none transition-all hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
+  'group/tabs-trigger relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 font-normal whitespace-nowrap transition-all outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3.5',
   {
     variants: {
       variant: {
-        line: '-mb-px border-b-2 border-transparent text-muted-foreground data-[state=active]:border-tab-indicator data-[state=active]:text-foreground group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:border-b-0 group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:justify-start',
+        line: '-mb-px border-b-2 border-transparent text-muted-foreground group-data-[orientation=vertical]/tabs:-mr-px group-data-[orientation=vertical]/tabs:mb-0 group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:border-r-2 group-data-[orientation=vertical]/tabs:border-b-0 data-[state=active]:border-tab-indicator data-[state=active]:text-foreground',
         capsule:
           'rounded-md text-muted-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
         // text 模式：trigger 间 ::after 竖线分隔（8px 高、1px 宽、垂直居中、border 色）
-        text: 'text-muted-foreground after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-2 after:w-px after:bg-border last:after:hidden data-[state=active]:text-primary',
+        text: 'text-muted-foreground after:absolute after:top-1/2 after:right-0 after:h-2 after:w-px after:-translate-y-1/2 after:bg-border last:after:hidden data-[state=active]:text-primary',
         wrapped:
-          '-ml-px first:ml-0 first:rounded-l-sm last:rounded-r-sm border border-border text-muted-foreground data-[state=active]:z-10 data-[state=active]:border-primary data-[state=active]:text-foreground',
+          '-ml-px border border-border text-muted-foreground first:ml-0 first:rounded-l-sm last:rounded-r-sm data-[state=active]:z-10 data-[state=active]:border-primary data-[state=active]:text-foreground',
       },
       size: {
         sm: 'h-9 px-4 text-xs',

package/src/components/tabs/meta.md

@@ -194,6 +194,32 @@
 </Tabs>
 ```
 
+### Closable
+
+可关闭选项卡（closable + onClose），适合多文档/工作区场景。
+
+```tsx
+<Tabs value={active} onValueChange={setActive}>
+  <TabsList>
+    {tabs.map((t) => (
+      <TabsTrigger
+        key={t.key}
+        value={t.key}
+        closable
+        onClose={handleClose}
+      >
+        {t.title}
+      </TabsTrigger>
+    ))}
+  </TabsList>
+  {tabs.map((t) => (
+    <TabsContent key={t.key} value={t.key}>
+      <p className="text-muted-foreground">{t.title} 的内容</p>
+    </TabsContent>
+  ))}
+</Tabs>
+```
+
 ### Vertical
 
 垂直方向选项卡。
@@ -217,6 +243,32 @@
 </Tabs>
 ```
 
+### Controlled
+
+受控用法 + onValueChange 回调。
+
+```tsx
+<div className="flex flex-col gap-2">
+  <Tabs value={value} onValueChange={setValue}>
+    <TabsList>
+      <TabsTrigger value="home">首页</TabsTrigger>
+      <TabsTrigger value="docs">文档</TabsTrigger>
+      <TabsTrigger value="api">API</TabsTrigger>
+    </TabsList>
+    <TabsContent value="home">
+      <p className="text-muted-foreground">首页内容。</p>
+    </TabsContent>
+    <TabsContent value="docs">
+      <p className="text-muted-foreground">文档内容。</p>
+    </TabsContent>
+    <TabsContent value="api">
+      <p className="text-muted-foreground">API 参考。</p>
+    </TabsContent>
+  </Tabs>
+  <div className="text-xs text-muted-foreground">当前激活：{value}</div>
+</div>
+```
+
 ### Overflow
 
 溢出滑动：当选项卡超出容器宽度时，显示左右箭头进行滑动。

package/src/components/tag/index.tsx

@@ -159,7 +159,7 @@ const SOLID_BG_MAP: Record<
 
 // ─── cva(仅覆盖 solid / outline / ghost 三种背景形态) ───────────────────
 const tagVariants = cva(
-  'inline-flex items-center gap-1 overflow-hidden whitespace-nowrap text-ellipsis border border-border font-normal transition-colors shrink-0 max-w-full',
+  'inline-flex max-w-full shrink-0 items-center gap-1 truncate border border-border font-normal transition-colors',
   {
     variants: {
       variant: {
@@ -403,10 +403,10 @@ function Tag({
       }}
       className={cn(
         '-mr-0.5 inline-flex shrink-0 cursor-pointer rounded-sm opacity-60 transition-opacity hover:opacity-100',
-        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        'focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none',
         disabled && 'cursor-not-allowed opacity-30 hover:opacity-30',
         hoverReveal &&
-          'mr-0 overflow-hidden w-0 opacity-0 transition-[width,opacity] duration-150 group-hover/tag:w-3 group-hover/tag:opacity-60',
+          'mr-0 w-0 overflow-hidden opacity-0 transition-[width,opacity] duration-150 group-hover/tag:w-3 group-hover/tag:opacity-60',
       )}
     >
       {renderCloseIcon(closableConfig.closeIcon)}
@@ -429,7 +429,7 @@ function Tag({
         data-close-area={closableConfig ? closeArea : undefined}
         aria-disabled={disabled || undefined}
         className={cn(
-          'inline-flex h-6 max-w-full items-center gap-1.5 overflow-hidden whitespace-nowrap text-ellipsis text-xs font-normal shrink-0',
+          'inline-flex h-6 max-w-full shrink-0 items-center gap-1.5 truncate text-xs font-normal',
           size === 'sm' && 'h-5',
           size === 'lg' && 'h-7',
           disabled && 'cursor-not-allowed opacity-50',
@@ -644,12 +644,12 @@ function CheckableTag({
       }}
       style={{ borderRadius: 'var(--radius-tag)', ...style }}
       className={cn(
-        'inline-flex h-6 max-w-full cursor-pointer items-center gap-1 overflow-hidden whitespace-nowrap text-ellipsis border border-border px-2 text-xs font-normal transition-colors shrink-0',
-        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+        'inline-flex h-6 max-w-full shrink-0 cursor-pointer items-center gap-1 truncate border border-border px-2 text-xs font-normal transition-colors',
+        'focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none',
         variant === 'outline'
           ? checked
-            ? 'border-primary text-primary bg-primary/10 hover:bg-primary/15'
-            : 'border-border text-foreground bg-transparent hover:bg-accent'
+            ? 'border-primary bg-primary/10 text-primary hover:bg-primary/15'
+            : 'border-border bg-transparent text-foreground hover:bg-accent'
           : checked
           ? 'border-primary bg-primary text-primary-foreground hover:bg-primary/90'
           : 'border-border bg-muted text-foreground hover:bg-accent',

package/src/components/tag/meta.md

@@ -152,6 +152,98 @@ closeArea / aria-label),`onClose(e)` 调用 `e.preventDefault()` 即可
 </TagGroup>
 ```
 
+### Closable
+
+关闭路径升级: - `closable` 接受 boolean / 对象,可自定义 `closeIcon` / `closeArea` / `aria-label` - `onClose(e)` 调用 `e.preventDefault()` 阻止默认关闭 - `visible` / `defaultVisible` 双形态可见性
+
+```tsx
+<div className="flex flex-col gap-4">
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">默认 tail</h4>
+    <TagGroup>
+      <Tag closable color="primary">
+        tail close
+      </Tag>
+      <Tag closable color="success" onClose={() => console.log('closed')}>
+        带回调
+      </Tag>
+    </TagGroup>
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">
+      自定义 closeIcon
+    </h4>
+    <TagGroup>
+      <Tag
+        closable={{ closeIcon: <Trash2 />, 'aria-label': 'Delete' }}
+        color="destructive"
+      >
+        custom icon
+      </Tag>
+    </TagGroup>
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">
+      closeArea = &quot;tag&quot;(整体可点击关闭)
+    </h4>
+    <TagGroup>
+      <Tag closable={{ closeArea: 'tag' }} color="warning">
+        click anywhere
+      </Tag>
+    </TagGroup>
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">
+      preventDefault 阻止默认关闭
+    </h4>
+    <TagGroup>
+      <Tag
+        closable
+        color="primary"
+        onClose={(e) => {
+          e.preventDefault();
+          console.log('blocked');
+        }}
+      >
+        cannot close
+      </Tag>
+    </TagGroup>
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">受控 visible</h4>
+    <TagGroup>
+      <Tag
+        closable
+        visible={visible}
+        onClose={(e) => {
+          e.preventDefault();
+          setVisible(false);
+        }}
+        color="primary"
+      >
+        controlled
+      </Tag>
+      <CheckableTag checked={visible} onChange={setVisible}>
+        {visible ? '隐藏' : '显示'}
+      </CheckableTag>
+    </TagGroup>
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">
+      hoverReveal（hover 时才显示 ×）
+    </h4>
+    <TagGroup>
+      <Tag closable={{ hoverReveal: true }} color="primary">
+        hover me
+      </Tag>
+      <Tag closable={{ hoverReveal: true }} color="success">
+        hover me too
+      </Tag>
+    </TagGroup>
+  </div>
+</div>
+```
+
 ### Disabled
 
 禁用态:普通 / closable / checkable 三态。
@@ -185,6 +277,59 @@ closeArea / aria-label),`onClose(e)` 调用 `e.preventDefault()` 即可
 </div>
 ```
 
+### Status
+
+status 9 档对照表：彩色标签(tag) / 圆点(statusTag) / 图标(statusIconTag)。 对齐 teamix-pro ProField status demo 矩阵。
+
+```tsx
+<table className="text-sm">
+  <thead>
+    <tr className="text-left text-muted-foreground">
+      <th className="w-20 pb-2 font-normal">类型</th>
+      <th className="w-20 pb-2 font-normal">描述</th>
+      <th className="px-4 pb-2 font-normal">tag</th>
+      <th className="px-4 pb-2 font-normal">statusTag</th>
+      <th className="px-4 pb-2 font-normal">statusIconTag</th>
+    </tr>
+  </thead>
+  <tbody>
+    {rows.map((row) => (
+      <tr key={row.status}>
+        <td className="py-1.5 pr-2 font-mono text-xs text-muted-foreground">
+          {row.status}
+        </td>
+        <td className="py-1.5 pr-2 text-muted-foreground">{row.label}</td>
+        <td className="px-4 py-1.5">
+          {row.noTag ? (
+            <span className="text-muted-foreground">-</span>
+          ) : (
+            <Tag status={row.status}>{row.label}</Tag>
+          )}
+        </td>
+        <td className="px-4 py-1.5">
+          {row.noStatus ? (
+            <span className="text-muted-foreground">-</span>
+          ) : (
+            <Tag variant="status" status={row.status}>
+              {row.label}
+            </Tag>
+          )}
+        </td>
+        <td className="px-4 py-1.5">
+          {row.noStatus ? (
+            <span className="text-muted-foreground">-</span>
+          ) : (
+            <Tag variant="status" status={row.status} showIcon>
+              {row.label}
+            </Tag>
+          )}
+        </td>
+      </tr>
+    ))}
+  </tbody>
+</table>
+```
+
 ### Palette
 
 装饰色 palette 9 预设 + 任意 CSS 值。
@@ -237,6 +382,55 @@ TagGroup 三档间距。
 </div>
 ```
 
+### Selectable
+
+CheckableTagGroup 多选 / 单选 / outline 三种模式。
+
+```tsx
+<div className="flex flex-col gap-4">
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">多选(默认)</h4>
+    <CheckableTagGroup
+      options={[
+        { label: 'React', value: 'react' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Angular', value: 'angular' },
+        { label: 'Svelte', value: 'svelte', disabled: true },
+      ]}
+      defaultValue={['react']}
+    />
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">
+      单选(multiple = false)
+    </h4>
+    <CheckableTagGroup
+      multiple={false}
+      value={single}
+      onChange={setSingle}
+      options={[
+        { label: 'React', value: 'react' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Angular', value: 'angular' },
+      ]}
+    />
+  </div>
+  <div>
+    <h4 className="mb-2 text-xs text-muted-foreground">outline 模式</h4>
+    <CheckableTagGroup
+      variant="outline"
+      options={[
+        { label: 'React', value: 'react' },
+        { label: 'Vue', value: 'vue' },
+        { label: 'Angular', value: 'angular' },
+        { label: 'Svelte', value: 'svelte' },
+      ]}
+      defaultValue={['react', 'vue']}
+    />
+  </div>
+</div>
+```
+
 ### AsChild
 
 asChild — 把 Tag 渲染为子元素(如链接)。

package/src/components/textarea/index.tsx

@@ -17,7 +17,7 @@ import { cn } from '@/lib/utils';
 // ─── Textarea cva ────────────────────────────────────────────────────────────
 
 const textareaVariants = cva(
-  'flex w-full cursor-text rounded-md border border-input bg-transparent font-normal field-sizing-content transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
+  'flex field-sizing-content w-full cursor-text rounded-md border border-input bg-transparent font-normal transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20',
   {
     variants: {
       size: {

package/src/components/textarea/meta.md

@@ -33,6 +33,14 @@
 </div>
 ```
 
+### Disabled
+
+添加 `disabled` 属性即可让多行输入框处于不可用状态。
+
+```tsx
+<Textarea placeholder="不可编辑" disabled className="w-80" />
+```
+
 ### Invalid
 
 通过 `aria-invalid` 标记错误状态，用于表单校验失败时。
@@ -75,3 +83,22 @@ Textarea 默认使用 `field-sizing-content` 自动撑开高度，也可以通
   />
 </div>
 ```
+
+### WithShowCount
+
+配合 InputGroup + InputGroupShowCount 在右下角展示字符计数； 越界时计数索引会自动变为 destructive 色。
+
+```tsx
+<InputGroup className="w-80">
+  <InputGroupTextarea
+    placeholder="请输入备注信息..."
+    value={value}
+    onChange={(e) => setValue(e.target.value)}
+    rows={4}
+    className="field-sizing-fixed"
+  />
+  <InputGroupAddon align="block-end" className="justify-end">
+    <InputGroupShowCount current={value.length} max={max} />
+  </InputGroupAddon>
+</InputGroup>
+```

package/src/components/textarea/stories.tsx

@@ -91,7 +91,7 @@ export const WithRows: Story = {
  * 越界时计数索引会自动变为 destructive 色。
  */
 export const WithShowCount: Story = {
-  render: function WithShowCountStory() {
+  render: () => {
     const [value, setValue] = useState('');
     const max = 100;
     return (

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

@@ -217,7 +217,7 @@ function TimeColumn({
         ref={containerRef}
         role="listbox"
         aria-label={ariaLabel}
-        className="absolute inset-0 overflow-y-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        className="absolute inset-0 [scrollbar-width:none] overflow-y-auto px-1 [&::-webkit-scrollbar]:hidden"
       >
         {values.map((v) => {
           const isDisabled = disabledSet.has(v);
@@ -233,7 +233,7 @@ function TimeColumn({
               disabled={isDisabled}
               onClick={() => !isDisabled && onChange(v)}
               className={cn(
-                'flex h-8 w-full cursor-pointer items-center justify-center rounded-md text-xs tabular-nums text-foreground transition-colors',
+                'flex h-8 w-full cursor-pointer items-center justify-center rounded-md text-xs text-foreground tabular-nums transition-colors',
                 'hover:bg-accent focus-visible:bg-accent focus-visible:outline-none',
                 'data-[state=checked]:bg-accent data-[state=checked]:font-medium data-[state=checked]:text-primary',
                 isDisabled &&
@@ -490,7 +490,7 @@ function TimePicker({
             placeholder={placeholder}
             disabled={disabled}
             readOnly={inputReadOnly}
-            className="min-w-0 grow cursor-text bg-transparent text-foreground outline-none tabular-nums placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            className="min-w-0 grow cursor-text bg-transparent text-foreground tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
           />
           {loading ? (
             <Spinner data-slot="time-picker-loading" size="md" tone="muted" />

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

@@ -79,6 +79,51 @@
 </div>
 ```
 
+### Controlled
+
+受控模式
+
+```tsx
+<div className="flex flex-col gap-2">
+  <TimePicker value={value} onChange={setValue} />
+  <p className="text-xs text-muted-foreground">
+    当前值: {value || '(空)'}
+  </p>
+</div>
+```
+
+### HourMinute
+
+仅小时和分钟
+
+```tsx
+<TimePicker format="HH:mm" placeholder="时:分" />
+```
+
+### MinuteStep
+
+步长:15 分钟间隔
+
+```tsx
+<TimePicker minuteStep={15} placeholder="15分钟步长" />
+```
+
+### Disabled
+
+禁用状态
+
+```tsx
+<TimePicker defaultValue="14:30:00" disabled />
+```
+
+### ErrorStatus
+
+错误状态
+
+```tsx
+<TimePicker status="error" placeholder="校验失败" />
+```
+
 ### Loading
 
 加载态：右侧图标替换为 spinner，loading > clear > Clock 互斥。
@@ -100,3 +145,34 @@
   disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 22, 23]}
 />
 ```
+
+### Panel
+
+独立使用 TimePickerPanel（可嵌入任意弹层或 DatePicker showTime）
+
+```tsx
+<div className="inline-flex rounded-md border border-border">
+  <TimePickerPanel value={parts} onChange={setParts} />
+</div>
+```
+
+### Range
+
+时间范围选择器
+
+```tsx
+<TimeRangePicker />
+```
+
+### RangeControlled
+
+时间范围 - 受控
+
+```tsx
+<div className="flex flex-col gap-2">
+  <TimeRangePicker value={value} onChange={setValue} />
+  <p className="text-xs text-muted-foreground">
+    {value[0] || '(空)'} ~ {value[1] || '(空)'}
+  </p>
+</div>
+```

package/src/components/timeline/index.tsx

@@ -217,6 +217,7 @@ const timelineDotVariants = cva(
     variants: {
       state: {
         done: 'size-3 bg-muted-foreground/40',
+        // eslint-disable-next-line tailwindcss/no-contradicting-classname -- TW v4: outline=style, outline-3=width
         process: 'size-3 bg-primary outline outline-3 outline-primary/20',
         error: 'size-3 bg-destructive',
         success: 'size-3 bg-success',

package/src/components/toggle/index.tsx

@@ -15,7 +15,7 @@ import { Toggle as TogglePrimitive } from 'radix-ui';
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-  'group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+  'group/toggle inline-flex cursor-pointer items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
   {
     variants: {
       variant: {

package/src/components/toggle-group/index.tsx

@@ -108,7 +108,7 @@ function ToggleGroup({
       style={{ '--gap': spacing } as React.CSSProperties}
       className={cn(
         // eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- dynamic gap via CSS var and responsive radius clamping not tokenizable.
-        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-md',
         className,
       )}
       {...(props as ToggleGroupRootProps)}