Merge branch 'v3' into fix/issue-6519
This commit is contained in:
WK Wong
@@ -9,6 +9,16 @@ description: HeroUI v3 的所有更新与变更，包含新功能、修复以及
|
||||
|
||||
## 最新版本
|
||||
|
||||
### v3.2.1
|
||||
|
||||
**2026 年 6 月 17 日**
|
||||
|
||||
补丁版本：`@heroui/react` 不再内置自己的 `react-aria` 副本。`react-aria` 的子路径在 Rollup 构建中被外部化，使消费方解析到项目中安装的单一 `react-aria`，而非内联副本。同时修复了 `SwitchGroup` 横向布局。
|
||||
|
||||
[阅读完整发布说明 →](/docs/react/releases/v3-2-1)
|
||||
|
||||
---
|
||||
|
||||
### v3.2.0
|
||||
|
||||
**2026 年 6 月 6 日**
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"---概述---",
|
||||
"index",
|
||||
"---版本列表---",
|
||||
"v3-2-1",
|
||||
"v3-2-0",
|
||||
"v3-1-0",
|
||||
"v3-0-5",
|
||||
|
||||
@@ -6,12 +6,12 @@ github:
|
||||
---
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="text-sm text-muted">2026 年 6 月 6 日</span>
|
||||
<span className="text-sm text-muted">2026 年 6 月 15 日</span>
|
||||
</div>
|
||||
|
||||
Calendar 新增周视图与日视图、重做的年份选择器，以及基于 React Aria 1.18 的范围日历演示。[Tooltip](/docs/components/tooltip) 新增用于全局显示与隐藏延迟的主题变量。Radio、Checkbox、Switch 迁移到 React Aria 的 `*Field` + `*Button` 组合方式。本次发布同时纳入了随 React Aria 1.18 一起发布的补丁修复（`Table.SortableColumnHeader`、Toast 与 Fieldset 修复、滚动与 RTL 样式修复）。
|
||||
Calendar 新增周视图与日视图、重做的年份选择器，以及基于 React Aria 1.18 的范围日历演示。[Autocomplete](/docs/components/autocomplete) 新增用于大型选项列表的 Virtualizer 示例。[Tooltip](/docs/components/tooltip) 新增用于全局显示与隐藏延迟的主题变量。Radio、Checkbox、Switch 迁移到 React Aria 的 `*Field` + `*Button` 组合方式。本次发布同时纳入了虚拟化列表、分组字段自动填充、Toast 与 Fieldset 行为，以及滚动与 RTL 样式方面的补丁修复。
|
||||
|
||||
⚠️ **破坏性变更**：`Radio`、`Checkbox`、`Switch` 改为显式的 `*.Content` 组合 —— `*.Control` 嵌套进 `*.Content`，标签变为 `*.Content` 内的纯文本（不嵌套 `<Label>`），`Description`/`FieldError` 变为 `*.Content` 的兄弟节点。详见[破坏性变更](#-breaking-changes)。
|
||||
⚠️ **破坏性变更**：`Radio`、`Checkbox`、`Switch` 改为显式的 `*.Content` 组合 —— `*.Control` 嵌套进 `*.Content`，标签变为 `*.Content` 内的纯文本（不嵌套 `<Label>`），`Description`/`FieldError` 变为 `*.Content` 的兄弟节点。详见[破坏性变更](#%EF%B8%8F-breaking-changes)。
|
||||
|
||||
## 安装
|
||||
|
||||
@@ -67,9 +67,16 @@ Calendar 新增周视图与日视图、重做的年份选择器，以及基于 R
|
||||
|
||||
<ComponentPreview name="calendar-multiple-selection" />
|
||||
|
||||
**多选：**
|
||||
### Autocomplete
|
||||
|
||||
<ComponentPreview name="calendar-multiple-selection" />
|
||||
支持通过 Virtualizer 渲染大型选项列表，并补充文档、Storybook 示例，以及针对 popover 尺寸和 listbox 滚动高度的样式修复。
|
||||
|
||||
- **虚拟化**：在 `Autocomplete.Popover` 内用 React Aria 的 `<Virtualizer>` 包裹 `ListBox` ([#6642](https://github.com/heroui-inc/heroui/pull/6642))
|
||||
- **Popover 尺寸**：listbox 高度上限为 `320px` 并支持内部滚动；搜索框固定在列表上方
|
||||
|
||||
**虚拟化：**
|
||||
|
||||
<ComponentPreview name="autocomplete-virtualization" />
|
||||
|
||||
### Table.SortableColumnHeader
|
||||
|
||||
@@ -129,7 +136,10 @@ Calendar 新增周视图与日视图、重做的年份选择器，以及基于 R
|
||||
- **DatePicker / DateRangePicker**：日历 popover 由 `max-w-(--trigger-width)` 改为 `min-w-(--trigger-width)`，确保 popover 至少与触发器一样宽，避免被水平裁剪 ([#6622](https://github.com/heroui-inc/heroui/pull/6622))。
|
||||
- **Table**：当 Table 被 React Aria 的 `<Virtualizer>` 包裹时，secondary 表头的边框与圆角能够正确渲染 —— 列选择器不再把每个虚拟化列都同时视为 first 和 last child ([#6624](https://github.com/heroui-inc/heroui/pull/6624))。
|
||||
- **Autocomplete**：Popover 限制为触发器宽度，listbox 高度上限为 `320px` 并支持内部滚动，避免虚拟化列表溢出 popover ([#6642](https://github.com/heroui-inc/heroui/pull/6642))。
|
||||
- **ListBox**：将 `flex flex-col gap` 改为普通块级流 + 兄弟节点间距，避免 React Aria Virtualizer 的内容高度被 flex-shrink 压缩 —— 修复虚拟化滚动时滚动条滑块尺寸变化的问题 ([#6636](https://github.com/heroui-inc/heroui/pull/6636))。
|
||||
- **InputGroup / NumberField / SearchField**：浏览器自动填充高亮提升到分组容器上，使 prefix、suffix 和增减按钮槽位共享圆角高亮 ([#6625](https://github.com/heroui-inc/heroui/pull/6625))。
|
||||
- **Spinner**：改用 `inline-flex` 搭配 `shrink-0`（替代 `relative`），使旋转动画在非 flex 布局中也能正确渲染，并支持 `motion-reduce` ([#6644](https://github.com/heroui-inc/heroui/pull/6644))。
|
||||
- **Toast**：关闭按钮在所有断点下统一使用 `-top-1 -right-1`，与容器内边距对齐 ([#6574](https://github.com/heroui-inc/heroui/pull/6574))。
|
||||
|
||||
## 依赖
|
||||
|
||||
@@ -252,6 +262,7 @@ Calendar 新增周视图与日视图、重做的年份选择器，以及基于 R
|
||||
## 链接
|
||||
|
||||
- [Calendar 文档](/docs/react/components/calendar)
|
||||
- [Autocomplete 文档](/docs/react/components/autocomplete)
|
||||
- [Tooltip 文档](/docs/react/components/tooltip)
|
||||
- [Checkbox 文档](/docs/react/components/checkbox)
|
||||
- [Radio Group 文档](/docs/react/components/radio-group)
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: v3.2.1
|
||||
description: 补丁版本：将 react-aria 从 @heroui/react 产物中外部化，并修复 SwitchGroup 横向布局。
|
||||
github:
|
||||
pull: 6654
|
||||
---
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="text-sm text-muted">2026 年 6 月 17 日</span>
|
||||
</div>
|
||||
|
||||
补丁版本：`@heroui/react` 不再内置自己的 `react-aria` 副本。`react-aria` 的子路径现在在 Rollup 构建中被外部化，因此会解析到你项目中安装的版本 —— 避免在 `@heroui/react` 内部打包出一份重复、内联的 `react-aria` 副本。本次发布还修复了 `SwitchGroup` 横向布局，补全缺失的 `switch-group__items` 包装层。
|
||||
|
||||
## 安装
|
||||
|
||||
升级到最新版本：
|
||||
|
||||
<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
|
||||
<Tab value="npm">
|
||||
```bash
|
||||
npm i @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="pnpm">
|
||||
```bash
|
||||
pnpm add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="yarn">
|
||||
```bash
|
||||
yarn add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="bun">
|
||||
```bash
|
||||
bun add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
<Callout type="info">
|
||||
**正在使用 AI 助手？** 对它说「Hey Cursor，把 HeroUI 升级到最新版本」。它会自动对比版本并应用必要变更。了解更多请参阅 [HeroUI MCP 服务器](/docs/ui-for-agents/mcp-server)。
|
||||
</Callout>
|
||||
|
||||
## 错误修复
|
||||
|
||||
- **@heroui/react**：将 `react-aria` 子路径与其他 `@react-*` 和 `react-aria-components` 一起在 Rollup 构建中外部化，使 `@heroui/react` 不再内置自己的 `react-aria` 副本。消费方现在会解析到项目中安装的单一 `react-aria`，避免重复实例的问题以及不必要的产物体积膨胀 ([#6653](https://github.com/heroui-inc/heroui/pull/6653))。
|
||||
- **SwitchGroup**：补全缺失的 `switch-group__items` 包装层，使 `orientation="horizontal"` 时开关横向排列，而不再垂直堆叠 ([#6655](https://github.com/heroui-inc/heroui/pull/6655))。
|
||||
|
||||
## 链接
|
||||
|
||||
- [组件文档](/docs/react/components)
|
||||
- [GitHub 仓库](https://github.com/heroui-inc/heroui)
|
||||
- [GitHub PR #6654](https://github.com/heroui-inc/heroui/pull/6654)
|
||||
|
||||
## 贡献者
|
||||
|
||||
感谢所有为本次发布做出贡献的人！
|
||||
|
||||
<PRContributors />
|
||||
@@ -9,6 +9,16 @@ description: All updates and changes to HeroUI v3, including new features, fixes
|
||||
|
||||
## Latest Release
|
||||
|
||||
### v3.2.1
|
||||
|
||||
**June 17, 2026**
|
||||
|
||||
Patch release: `@heroui/react` no longer bundles its own copy of `react-aria`. The `react-aria` subpaths are externalized in the Rollup build, so consumers resolve to the single `react-aria` installed in their project instead of a vendored copy. Also fixes `SwitchGroup` horizontal layout.
|
||||
|
||||
[Read full release notes →](/docs/react/releases/v3-2-1)
|
||||
|
||||
---
|
||||
|
||||
### v3.2.0
|
||||
|
||||
**June 6, 2026**
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"---Overview---",
|
||||
"index",
|
||||
"---Releases---",
|
||||
"v3-2-1",
|
||||
"v3-2-0",
|
||||
"v3-1-0",
|
||||
"v3-0-5",
|
||||
|
||||
@@ -6,12 +6,12 @@ github:
|
||||
---
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="text-sm text-muted">June 6, 2026</span>
|
||||
<span className="text-sm text-muted">June 15, 2026</span>
|
||||
</div>
|
||||
|
||||
Calendar gains week and day views, a reworked year picker, and range demos built on React Aria 1.18. [Tooltip](/docs/components/tooltip) adds theme variables for global show and hide delays. The toggles (`Radio`, `Checkbox`, `Switch`) move to React Aria's `*Field` + `*Button` composition. This release also rolls in the patch fixes shipped alongside React Aria 1.18 (`Table.SortableColumnHeader`, toast and fieldset fixes, scroll and RTL style fixes).
|
||||
Calendar gains week and day views, a reworked year picker, and range demos built on React Aria 1.18. [Autocomplete](/docs/components/autocomplete) adds a Virtualizer example for large option lists. [Tooltip](/docs/components/tooltip) adds theme variables for global show and hide delays. The toggles (`Radio`, `Checkbox`, `Switch`) move to React Aria's `*Field` + `*Button` composition. This release also rolls in patch fixes for virtualized lists, grouped-field autofill, toast and fieldset behavior, and scroll and RTL styles.
|
||||
|
||||
⚠️ **Breaking changes**: `Radio`, `Checkbox`, and `Switch` move to an explicit `*.Content` composition — `*.Control` nests inside `*.Content`, the label is plain text inside `*.Content` (no nested `<Label>`), and `Description`/`FieldError` become siblings of `*.Content`. See [Breaking Changes](#-breaking-changes).
|
||||
⚠️ **Breaking changes**: `Radio`, `Checkbox`, and `Switch` move to an explicit `*.Content` composition — `*.Control` nests inside `*.Content`, the label is plain text inside `*.Content` (no nested `<Label>`), and `Description`/`FieldError` become siblings of `*.Content`. See [Breaking Changes](#%EF%B8%8F-breaking-changes).
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -67,9 +67,16 @@ Update to the latest version:
|
||||
|
||||
<ComponentPreview name="calendar-multiple-selection" />
|
||||
|
||||
**Multiple selection:**
|
||||
### Autocomplete
|
||||
|
||||
<ComponentPreview name="calendar-multiple-selection" />
|
||||
Virtualizer support for large option lists, with docs, Storybook, and style fixes for popover sizing and listbox scroll height.
|
||||
|
||||
- **Virtualization**: Wrap `ListBox` in React Aria's `<Virtualizer>` inside `Autocomplete.Popover` ([#6642](https://github.com/heroui-inc/heroui/pull/6642))
|
||||
- **Popover sizing**: Listbox caps at `320px` with internal scrolling; search field stays fixed above the list
|
||||
|
||||
**Virtualization:**
|
||||
|
||||
<ComponentPreview name="autocomplete-virtualization" />
|
||||
|
||||
### Table.SortableColumnHeader
|
||||
|
||||
@@ -129,7 +136,10 @@ Individual `delay` and `closeDelay` props still override these values on specifi
|
||||
- **DatePicker / DateRangePicker**: Calendar popovers use `min-w-(--trigger-width)` instead of `max-w-(--trigger-width)` so the calendar is at least as wide as the trigger and no longer clips horizontally ([#6622](https://github.com/heroui-inc/heroui/pull/6622)).
|
||||
- **Table**: Secondary header borders and rounded corners render correctly when the table is wrapped in React Aria's `<Virtualizer>` — column selectors no longer treat every virtualized column as both first and last child ([#6624](https://github.com/heroui-inc/heroui/pull/6624)).
|
||||
- **Autocomplete**: The popover is constrained to the trigger width and the listbox caps its height at `320px` with internal scrolling, so virtualized lists no longer overflow the popover ([#6642](https://github.com/heroui-inc/heroui/pull/6642)).
|
||||
- **ListBox**: Replaces `flex flex-col gap` with block flow + sibling margins so React Aria's Virtualizer content height is not collapsed by flex-shrink — fixes scrollbar thumb resizing during virtualized scroll ([#6636](https://github.com/heroui-inc/heroui/pull/6636)).
|
||||
- **InputGroup / NumberField / SearchField**: Browser autofill highlight lifts onto the group shell so prefix, suffix, and increment/decrement slots share the rounded highlight ([#6625](https://github.com/heroui-inc/heroui/pull/6625)).
|
||||
- **Spinner**: Uses `inline-flex` with `shrink-0` (instead of `relative`) so the spin animation renders correctly in non-flex layouts, and honors `motion-reduce` ([#6644](https://github.com/heroui-inc/heroui/pull/6644)).
|
||||
- **Toast**: Close button uses `-top-1 -right-1` on all breakpoints to align with container padding ([#6574](https://github.com/heroui-inc/heroui/pull/6574)).
|
||||
|
||||
## Dependencies
|
||||
|
||||
@@ -252,6 +262,7 @@ Full per-component guides: [Checkbox](/docs/react/migration/checkbox), [Checkbox
|
||||
## Links
|
||||
|
||||
- [Calendar Docs](/docs/react/components/calendar)
|
||||
- [Autocomplete Docs](/docs/react/components/autocomplete)
|
||||
- [Tooltip Docs](/docs/react/components/tooltip)
|
||||
- [Checkbox Docs](/docs/react/components/checkbox)
|
||||
- [Radio Group Docs](/docs/react/components/radio-group)
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: v3.2.1
|
||||
description: Patch release that externalizes react-aria from the @heroui/react bundle and fixes SwitchGroup horizontal layout.
|
||||
github:
|
||||
pull: 6654
|
||||
---
|
||||
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="text-sm text-muted">June 17, 2026</span>
|
||||
</div>
|
||||
|
||||
Patch release: `@heroui/react` no longer bundles its own copy of `react-aria`. The `react-aria` subpaths are now externalized in the Rollup build, so they resolve to the version installed in your project — preventing a duplicated, vendored copy of `react-aria` from shipping inside `@heroui/react`. This release also fixes `SwitchGroup` horizontal layout by rendering the missing `switch-group__items` wrapper.
|
||||
|
||||
## Installation
|
||||
|
||||
Update to the latest version:
|
||||
|
||||
<Tabs items={["npm", "pnpm", "yarn", "bun"]}>
|
||||
<Tab value="npm">
|
||||
```bash
|
||||
npm i @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="pnpm">
|
||||
```bash
|
||||
pnpm add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="yarn">
|
||||
```bash
|
||||
yarn add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
<Tab value="bun">
|
||||
```bash
|
||||
bun add @heroui/styles@latest @heroui/react@latest
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
<Callout type="info">
|
||||
**Using AI assistants?** Simply prompt "Hey Cursor, update HeroUI to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the [HeroUI MCP Server](/docs/ui-for-agents/mcp-server).
|
||||
</Callout>
|
||||
|
||||
## Bug Fixes
|
||||
|
||||
- **@heroui/react**: Externalize the `react-aria` subpaths in the Rollup build alongside the other `@react-*` and `react-aria-components` externals, so `@heroui/react` no longer vendors its own copy of `react-aria`. Consumers now resolve to the single `react-aria` installed in their project, avoiding duplicate-instance bugs and unnecessary bundle bloat ([#6653](https://github.com/heroui-inc/heroui/pull/6653)).
|
||||
- **SwitchGroup**: Render the missing `switch-group__items` wrapper so `orientation="horizontal"` lays out switches in a row instead of stacking vertically ([#6655](https://github.com/heroui-inc/heroui/pull/6655)).
|
||||
|
||||
## Links
|
||||
|
||||
- [Component Docs](/docs/react/components)
|
||||
- [GitHub Repository](https://github.com/heroui-inc/heroui)
|
||||
- [GitHub PR #6654](https://github.com/heroui-inc/heroui/pull/6654)
|
||||
|
||||
## Contributors
|
||||
|
||||
Thanks to everyone who contributed to this release!
|
||||
|
||||
<PRContributors />
|
||||
@@ -106,7 +106,7 @@ const COMPONENT_GROUPS = [
|
||||
},
|
||||
{
|
||||
category: "Typography",
|
||||
components: ["(typography)/kbd"],
|
||||
components: ["(typography)/kbd", "(typography)/typography"],
|
||||
},
|
||||
{
|
||||
category: "Data Display",
|
||||
|
||||
@@ -5,9 +5,9 @@ import {Switch} from "@heroui/react";
|
||||
|
||||
export function CustomStyles() {
|
||||
return (
|
||||
<Switch>
|
||||
<Switch aria-label="Power">
|
||||
{({isSelected}) => (
|
||||
<>
|
||||
<Switch.Content>
|
||||
<Switch.Control
|
||||
className={`h-[31px] w-[51px] bg-blue-500 ${isSelected ? "bg-cyan-500 shadow-[0_0_12px_rgba(6,182,212,0.5)]" : ""}`}
|
||||
>
|
||||
@@ -23,7 +23,7 @@ export function CustomStyles() {
|
||||
</Switch.Icon>
|
||||
</Switch.Thumb>
|
||||
</Switch.Control>
|
||||
</>
|
||||
</Switch.Content>
|
||||
)}
|
||||
</Switch>
|
||||
);
|
||||
|
||||
@@ -46,9 +46,9 @@ export function WithIcons() {
|
||||
return (
|
||||
<div className="flex gap-3">
|
||||
{Object.entries(icons).map(([key, value]) => (
|
||||
<Switch key={key} defaultSelected size="lg">
|
||||
<Switch key={key} defaultSelected aria-label={key} size="lg">
|
||||
{({isSelected}) => (
|
||||
<>
|
||||
<Switch.Content>
|
||||
<Switch.Control className={isSelected ? value.selectedControlClass : ""}>
|
||||
<Switch.Thumb>
|
||||
<Switch.Icon>
|
||||
@@ -60,7 +60,7 @@ export function WithIcons() {
|
||||
</Switch.Icon>
|
||||
</Switch.Thumb>
|
||||
</Switch.Control>
|
||||
</>
|
||||
</Switch.Content>
|
||||
)}
|
||||
</Switch>
|
||||
))}
|
||||
|
||||
@@ -5,9 +5,9 @@ import {Switch} from "@heroui/react";
|
||||
|
||||
export function CustomStyles() {
|
||||
return (
|
||||
<Switch>
|
||||
<Switch aria-label="Power">
|
||||
{({isSelected}) => (
|
||||
<>
|
||||
<Switch.Content>
|
||||
<Switch.Control
|
||||
className={`h-[31px] w-[51px] bg-blue-500 ${isSelected ? "bg-cyan-500 shadow-[0_0_12px_rgba(6,182,212,0.5)]" : ""}`}
|
||||
>
|
||||
@@ -23,7 +23,7 @@ export function CustomStyles() {
|
||||
</Switch.Icon>
|
||||
</Switch.Thumb>
|
||||
</Switch.Control>
|
||||
</>
|
||||
</Switch.Content>
|
||||
)}
|
||||
</Switch>
|
||||
);
|
||||
|
||||
@@ -46,9 +46,9 @@ export function WithIcons() {
|
||||
return (
|
||||
<div className="flex gap-3">
|
||||
{Object.entries(icons).map(([key, value]) => (
|
||||
<Switch key={key} defaultSelected size="lg">
|
||||
<Switch key={key} defaultSelected aria-label={key} size="lg">
|
||||
{({isSelected}) => (
|
||||
<>
|
||||
<Switch.Content>
|
||||
<Switch.Control className={isSelected ? value.selectedControlClass : ""}>
|
||||
<Switch.Thumb>
|
||||
<Switch.Icon>
|
||||
@@ -60,7 +60,7 @@ export function WithIcons() {
|
||||
</Switch.Icon>
|
||||
</Switch.Thumb>
|
||||
</Switch.Control>
|
||||
</>
|
||||
</Switch.Content>
|
||||
)}
|
||||
</Switch>
|
||||
))}
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
"home": {
|
||||
"releaseBadges": [
|
||||
{
|
||||
"label": "HeroUI React v3.2.0 — Calendar 视图与 toggle 变更",
|
||||
"href": "/docs/react/releases/v3-2-0"
|
||||
"label": "HeroUI React v3.2.1 — 补丁版本",
|
||||
"href": "/docs/react/releases/v3-2-1"
|
||||
},
|
||||
{
|
||||
"label": "全新 CLI：create-heroui-native-app v1.0.0",
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
"home": {
|
||||
"releaseBadges": [
|
||||
{
|
||||
"label": "HeroUI React v3.2.0 — Calendar views & toggle changes",
|
||||
"href": "/docs/react/releases/v3-2-0"
|
||||
"label": "HeroUI React v3.2.1 — patch release",
|
||||
"href": "/docs/react/releases/v3-2-1"
|
||||
},
|
||||
{
|
||||
"label": "New CLI: create-heroui-native-app v1.0.0",
|
||||
|
||||
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "heroui",
|
||||
"private": true,
|
||||
"version": "3.1.0",
|
||||
"version": "3.2.1",
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "HeroUI",
|
||||
"email": "support@heroui.com",
|
||||
"url": "https://www.heroui.com/"
|
||||
"url": "https://heroui.com/"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@heroui/react",
|
||||
"version": "3.1.0",
|
||||
"version": "3.2.1",
|
||||
"description": "🚀 Beautiful and modern React UI library built with Tailwind CSS 4.0.",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
|
||||
@@ -50,6 +50,7 @@ const external = [
|
||||
/^@react-stately/,
|
||||
/^@react-types\//,
|
||||
/^@internationalized\//,
|
||||
/^react-aria($|\/)/,
|
||||
/^react-aria-components($|\/)/,
|
||||
/^tailwind-merge/,
|
||||
/^tailwind-variants/,
|
||||
|
||||
@@ -32,7 +32,9 @@ const SwitchGroupRoot = <E extends keyof React.JSX.IntrinsicElements = "div">({
|
||||
|
||||
return (
|
||||
<dom.div data-slot="switch-group" {...(props as any)} className={slots.base({className})}>
|
||||
{children}
|
||||
<dom.div className={slots.items()} data-slot="switch-group-items">
|
||||
{children}
|
||||
</dom.div>
|
||||
</dom.div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -49,6 +49,21 @@
|
||||
&[aria-disabled="true"] {
|
||||
@apply status-disabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser autofill state.
|
||||
* The user-agent paints `:-webkit-autofill`/`:autofill` on the inner <input>
|
||||
* element only, inside its content box. Because the inner input has its
|
||||
* border-radius stripped on whichever side touches a prefix/suffix, the
|
||||
* autofill highlight ends up as a sharp-cornered rectangle and the
|
||||
* prefix/suffix slots receive no highlight at all. Lift the highlight
|
||||
* onto the group so the rounded shell + prefix + suffix all share it.
|
||||
*/
|
||||
&:has([data-slot="input-group-input"]:-webkit-autofill),
|
||||
&:has([data-slot="input-group-input"]:autofill) {
|
||||
background-color: var(--field-focus);
|
||||
border-color: var(--field-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group__input {
|
||||
@@ -69,6 +84,25 @@
|
||||
&:focus-visible {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Neutralize the browser's per-input autofill paint so the inner <input>
|
||||
* doesn't draw a sharp-cornered yellow rectangle. The unified highlight
|
||||
* is applied to `.input-group` above. Preserve the autofilled text and
|
||||
* caret colors, and pin the background-color transition so the inset
|
||||
* box-shadow trick doesn't flicker on state changes.
|
||||
*/
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active,
|
||||
&:autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px transparent inset;
|
||||
box-shadow: 0 0 0 1000px transparent inset;
|
||||
-webkit-text-fill-color: var(--field-foreground);
|
||||
caret-color: var(--field-foreground);
|
||||
transition: background-color 9999s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
/* TextArea within InputGroup - uses same base class as input but with textarea-specific styles */
|
||||
|
||||
@@ -3,7 +3,20 @@
|
||||
========================================================================== */
|
||||
|
||||
.list-box {
|
||||
@apply relative flex w-full flex-col gap-1 overflow-clip p-1;
|
||||
@apply relative w-full overflow-clip p-1;
|
||||
|
||||
/**
|
||||
* Spacing between direct children.
|
||||
*
|
||||
* NOTE: We intentionally avoid `display: flex` + `gap` here because
|
||||
* react-aria's Virtualizer renders a `position: relative` content
|
||||
* div with an explicit large height (e.g. 50000px) as the only child
|
||||
* of the ListBox. Flex shrinking would collapse that height and break
|
||||
* scrollbar sizing during virtualized scroll.
|
||||
*/
|
||||
& > * + * {
|
||||
@apply mt-1;
|
||||
}
|
||||
|
||||
/* This makes the horizontal separator take up 94% of the width and be centered */
|
||||
[data-slot="separator"][data-orientation="horizontal"] {
|
||||
|
||||
@@ -59,6 +59,21 @@
|
||||
&[aria-disabled="true"] {
|
||||
@apply status-disabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser autofill state.
|
||||
* The user-agent paints `:-webkit-autofill`/`:autofill` on the inner <input>
|
||||
* only. Because the input has its border-radius stripped on whichever side
|
||||
* touches the increment/decrement buttons, the autofill highlight ends up
|
||||
* as a sharp-cornered rectangle and the buttons receive no highlight.
|
||||
* Lift the highlight onto the group so the rounded shell + buttons all
|
||||
* share it. (Affects autofilled numeric fields, e.g. OTP/year inputs.)
|
||||
*/
|
||||
&:has([data-slot="number-field-input"]:-webkit-autofill),
|
||||
&:has([data-slot="number-field-input"]:autofill) {
|
||||
background-color: var(--field-focus);
|
||||
border-color: var(--field-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.number-field__input {
|
||||
@@ -79,6 +94,25 @@
|
||||
&:focus-visible {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Neutralize the browser's per-input autofill paint so the inner <input>
|
||||
* doesn't draw a sharp-cornered yellow rectangle. The unified highlight
|
||||
* is applied to `.number-field__group` above. Preserve the autofilled
|
||||
* text and caret colors, and pin the background-color transition so the
|
||||
* inset box-shadow trick doesn't flicker on state changes.
|
||||
*/
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active,
|
||||
&:autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px transparent inset;
|
||||
box-shadow: 0 0 0 1000px transparent inset;
|
||||
-webkit-text-fill-color: var(--field-foreground);
|
||||
caret-color: var(--field-foreground);
|
||||
transition: background-color 9999s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.number-field__increment-button,
|
||||
|
||||
@@ -62,6 +62,21 @@
|
||||
&[aria-disabled="true"] {
|
||||
@apply status-disabled;
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser autofill state.
|
||||
* The user-agent paints `:-webkit-autofill`/`:autofill` on the inner <input>
|
||||
* only. Because the input has its border-radius stripped on whichever side
|
||||
* touches the search icon or clear button, the autofill highlight ends up
|
||||
* as a sharp-cornered rectangle and the sibling slots receive no highlight.
|
||||
* Lift the highlight onto the group so the rounded shell + icon + clear
|
||||
* button all share it.
|
||||
*/
|
||||
&:has([data-slot="search-field-input"]:-webkit-autofill),
|
||||
&:has([data-slot="search-field-input"]:autofill) {
|
||||
background-color: var(--field-focus);
|
||||
border-color: var(--field-border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.search-field__input {
|
||||
@@ -89,6 +104,25 @@
|
||||
&:focus-visible {
|
||||
@apply outline-none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Neutralize the browser's per-input autofill paint so the inner <input>
|
||||
* doesn't draw a sharp-cornered yellow rectangle. The unified highlight
|
||||
* is applied to `.search-field__group` above. Preserve the autofilled
|
||||
* text and caret colors, and pin the background-color transition so the
|
||||
* inset box-shadow trick doesn't flicker on state changes.
|
||||
*/
|
||||
&:-webkit-autofill,
|
||||
&:-webkit-autofill:hover,
|
||||
&:-webkit-autofill:focus,
|
||||
&:-webkit-autofill:active,
|
||||
&:autofill {
|
||||
-webkit-box-shadow: 0 0 0 1000px transparent inset;
|
||||
box-shadow: 0 0 0 1000px transparent inset;
|
||||
-webkit-text-fill-color: var(--field-foreground);
|
||||
caret-color: var(--field-foreground);
|
||||
transition: background-color 9999s ease-in-out 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.search-field__search-icon {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@heroui/styles",
|
||||
"version": "3.1.0",
|
||||
"version": "3.2.1",
|
||||
"description": "HeroUI core styles and Tailwind plugin",
|
||||
"author": "HeroUI <support@heroui.com>",
|
||||
"homepage": "https://heroui.com",
|
||||
|
||||
Reference in New Issue
Block a user