v3.0.0-beta.8

本次发布新增三个组件：Badge、Pagination 与 Table，并为 DateField 与 TimeField 提供了新的 InputContainer 组合 API。

⚠️ 破坏性变更：TextField 的 CSS 类已从 .text-field 重命名为 .textfield。

安装

升级到最新版本：

npm i @heroui/styles@beta @heroui/react@beta

pnpm add @heroui/styles@beta @heroui/react@beta

yarn add @heroui/styles@beta @heroui/react@beta

bun add @heroui/styles@beta @heroui/react@beta

新增功能

新组件

• Badge：紧凑的状态 + 计数指示器，可配置颜色、变体、放置位置与尺寸。（文档）
• Pagination：分页相关的复合组件基元，提供摘要、省略号以及上一页 / 下一页等控件。（文档）
• Table：数据表格基元，支持排序、选择、列宽调整、异步加载以及表脚组合。（文档）

Badge

新增徽章基元，可用于计数、标签以及通过 Badge.Anchor 与 Badge.Label 锚定的浮层。

import {Avatar, Badge} from "@heroui/react";

const GREEN_AVATAR_URL = "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/green.jpg";
const ORANGE_AVATAR_URL =
  "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg";

Pagination

新增导航组件，由可组合的部件构成（Root、Content、Item、Link、Previous、Next、Summary、Ellipsis）。

"use client";

import {Pagination} from "@heroui/react";
import {useState} from "react";

Table

基于 React Aria 构建的复合数据表格，支持可排序的列、行选择、自定义单元格、加载更多哨兵行以及可调整宽度的列。

import {Table} from "@heroui/react";

export function Basic() {
  return (
    <Table>

自定义单元格：

"use client";

import type {Selection, SortDescriptor} from "@heroui/react";

import {Avatar, Button, Checkbox, Chip, Table, cn} from "@heroui/react";

分页：

"use client";

import {Pagination, Table} from "@heroui/react";
import {useMemo, useState} from "react";

空状态：

"use client";

import {EmptyState, Table} from "@heroui/react";
import {Icon} from "@iconify/react";

组件 + API 改进

DateField 与 TimeField 的增强

DateField 与 TimeField 现在暴露了 InputContainer，用于在前缀与后缀内容之间包裹输入段（segment）。

之前：

<DateField.Group>
  <DateField.Prefix>...</DateField.Prefix>
  <DateField.Input>
    {(segment) => <DateField.Segment segment={segment} />}
  </DateField.Input>
  <DateField.Suffix>...</DateField.Suffix>
</DateField.Group>

之后：

<DateField.Group>
  <DateField.Prefix>...</DateField.Prefix>
  <DateField.InputContainer>
    <DateField.Input>
      {(segment) => <DateField.Segment segment={segment} />}
    </DateField.Input>
  </DateField.InputContainer>
  <DateField.Suffix>...</DateField.Suffix>
</DateField.Group>

"use client";

import type {TimeValue} from "@heroui/react";

import {DateField, DateRangePicker, Label, RangeCalendar, TimeField} from "@heroui/react";

⚠️ 破坏性变更

TextField 类名 + 路径重命名

为避免与 Tailwind 的 text-* 工具类前缀冲突，TextField 的样式命名已统一调整。

同一变更涉及的其他重命名：

• 样式文件：text-field.css -> textfield.css
• 样式导出路径：@heroui/styles/src/components/text-field -> @heroui/styles/src/components/textfield

样式修复

• RangeCalendar：为日历单元格添加圆角，优化范围选择的视觉效果（#6270）

Bug 修复

• 通过将 isRequired 转化为 data-required，为 DatePicker 与 DateRangePicker 补齐了必填状态的红色星号行为（#6270）
• 修复了 Autocomplete 与 Select 中触发器无效状态样式缺失的问题——将 invalid 样式限定在根状态范围内（#6270）
• 更新了 TextField 的文档与演示引用，使其指向新的 textfield-* demo key 以及对应的源码 / 样式路径（#6270）

链接

• 组件文档
• 设计系统 - Figma Kit v3
• GitHub 仓库
• GitHub PR #6270

贡献者

感谢每一位为本次发布做出贡献的开发者！