ci(changesets): version packages

* chore(deps): remove spacer and bump theme peer dependency

* refactor(table): remove spacer

* fix(theme): replace spacer by css

* chore(changeset): add changeset

* chore(changeset): update changeset message

apps/docs/app/examples/table/custom-styles/page.tsx

@@ -350,20 +350,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown className="bg-background border-1 border-default-200">
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-400" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/app/examples/table/use-case/page.tsx

@@ -342,20 +342,18 @@ export default function Page() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-300" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/content/blog/v2.3.0.mdx

@@ -144,7 +144,7 @@ nextui add --all
 
 <Spacer y={4} />
 
-> The CLI is currentl in `Alpha` stage, we're working on adding more features and improvements. If you find any issues or have any suggestions, please let us know by [opening an issue](https://github.com/heroui-inc/heroui-cli/issues/new).
+> The CLI is currently in `Alpha` stage, we're working on adding more features and improvements. If you find any issues or have any suggestions, please let us know by [opening an issue](https://github.com/heroui-inc/heroui-cli/issues/new).
 
 To learn more about the CLI and its commands, please refer to the [CLI documentation](/docs/guide/cli) and the [CLI API reference](/docs/api-references/cli-api).
 

apps/docs/content/blog/v2.8.0.mdx

@@ -93,7 +93,7 @@ The new `outside-top` option ensures that labels are consistently displayed at t
 
 ### Select
 
-Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is slected and a callback function triggered upon clearing the selection for custom handling.
+Two new properties `isClearable` and `onClear` have been introduced in the Select component. A clear button is visible when a value is selected and a callback function triggered upon clearing the selection for custom handling.
 
 <CodeDemo title="Clearable" files={selectIsClearable} />
 

apps/docs/content/components/date-range-picker/index.ts

@@ -19,7 +19,7 @@ import unavailableDates from "./unavailable-dates";
 import visibleMonth from "./visible-month";
 import firstDayOfWeek from "./first-day-of-week";
 import pageBehavior from "./page-behavior";
-import nonContigous from "./non-contiguous";
+import nonContiguous from "./non-contiguous";
 import presets from "./presets";
 import withMonthAndYearPickers from "./with-month-and-year-pickers";
 import customStyles from "./custom-styles";
@@ -46,7 +46,7 @@ export const dateRangePickerContent = {
   visibleMonth,
   firstDayOfWeek,
   pageBehavior,
-  nonContigous,
+  nonContiguous,
   presets,
   withMonthAndYearPickers,
   customStyles,

apps/docs/content/components/table/custom-styles.raw.jsx

@@ -441,20 +441,18 @@ export default function App() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown className="bg-background border-1 border-default-200">
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-400" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/content/components/table/custom-styles.raw.tsx

@@ -453,20 +453,18 @@ export default function App() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown className="bg-background border-1 border-default-200">
-              <DropdownTrigger>
-                <Button isIconOnly radius="full" size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-400" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown className="bg-background border-1 border-default-200">
+            <DropdownTrigger>
+              <Button isIconOnly radius="full" size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-400" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/content/components/table/use-case.raw.jsx

@@ -433,20 +433,18 @@ export default function App() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-300" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/content/components/table/use-case.raw.tsx

@@ -446,20 +446,18 @@ export default function App() {
         );
       case "actions":
         return (
-          <div className="relative flex justify-end items-center gap-2">
-            <Dropdown>
-              <DropdownTrigger>
-                <Button isIconOnly size="sm" variant="light">
-                  <VerticalDotsIcon className="text-default-300" />
-                </Button>
-              </DropdownTrigger>
-              <DropdownMenu>
-                <DropdownItem key="view">View</DropdownItem>
-                <DropdownItem key="edit">Edit</DropdownItem>
-                <DropdownItem key="delete">Delete</DropdownItem>
-              </DropdownMenu>
-            </Dropdown>
-          </div>
+          <Dropdown>
+            <DropdownTrigger>
+              <Button isIconOnly size="sm" variant="light">
+                <VerticalDotsIcon className="text-default-300" />
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu>
+              <DropdownItem key="view">View</DropdownItem>
+              <DropdownItem key="edit">Edit</DropdownItem>
+              <DropdownItem key="delete">Delete</DropdownItem>
+            </DropdownMenu>
+          </Dropdown>
         );
       default:
         return cellValue;

apps/docs/content/docs/components/calendar.mdx

@@ -264,7 +264,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
     {
       attribute: "defaultFocusedValue",
       type: "DateValue",
-      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      description: "The date that is focused when the calendar first mounts (uncontrolled).",
       default: "-"
     },
     {

apps/docs/content/docs/components/date-range-picker.mdx

@@ -273,7 +273,7 @@ import {today, isWeekend, getLocalTimeZone} from "@internationalized/date";
 import {useLocale} from "@react-aria/i18n";
 ```
 
-<CodeDemo title="Non Contiguous" files={dateRangePickerContent.nonContigous} />
+<CodeDemo title="Non Contiguous" files={dateRangePickerContent.nonContiguous} />
 
 ### Presets
 

apps/docs/content/docs/components/number-input.mdx

@@ -116,7 +116,7 @@ You can set the maximum value of the input by passing the `maxValue` property.
 
 ### With Wheel Disabled
 
-By default, you can increase or decrease the value with scroll wheel. You can disable changing the vaule with scroll in NumberInput by passing the `isWheelDisabled` property.
+By default, you can increase or decrease the value with scroll wheel. You can disable changing the value with scroll in NumberInput by passing the `isWheelDisabled` property.
 
 <CodeDemo title="With Wheel Disabled" files={numberInputContent.isWheelDisabled} />
 

apps/docs/content/docs/components/range-calendar.mdx

@@ -272,7 +272,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
     {
       attribute: "defaultFocusedValue",
       type: "DateValue", 
-      description: "The date that is focused when the calendar first mounts (uncountrolled).",
+      description: "The date that is focused when the calendar first mounts (uncontrolled).",
       default: "-"
     },
     {

apps/docs/content/docs/guide/tailwind-v4.mdx

@@ -61,7 +61,7 @@ Update your main css file as below
 
 #### With `tailwind.config.js`
 
-In Tailwind v4, `tailwind.config.js` is still supported for backward compatibility. If you still need to use it, you can load it explicity as below.
+In Tailwind v4, `tailwind.config.js` is still supported for backward compatibility. If you still need to use it, you can load it explicitly as below.
 
 ```diff-css
 /* your main css file */

packages/components/form/CHANGELOG.md

@@ -4,7 +4,7 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`8921dc4`](https://github.com/heroui-inc/heroui/commit/8921dc4361f7cdb8cbce755e8b90fdd799b668da), [`b38a2cf`](https://github.com/heroui-inc/heroui/commit/b38a2cfb58feb79b3baff10eff19e21480da1563), [`1782961`](https://github.com/heroui-inc/heroui/commit/17829618591d723beea665a7c56d9c45a112e24c), [`fd9dd2a`](https://github.com/heroui-inc/heroui/commit/fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1), [`bc4c982`](https://github.com/heroui-inc/heroui/commit/bc4c9826097a1014939b691425d30eff998d1e2e)]:
+- Updated dependencies [[`b89ba08`](https://github.com/heroui-inc/heroui/commit/b89ba08ae06bf0140f0bc92f10e9a09c1484cdba), [`8921dc4`](https://github.com/heroui-inc/heroui/commit/8921dc4361f7cdb8cbce755e8b90fdd799b668da), [`b38a2cf`](https://github.com/heroui-inc/heroui/commit/b38a2cfb58feb79b3baff10eff19e21480da1563), [`1782961`](https://github.com/heroui-inc/heroui/commit/17829618591d723beea665a7c56d9c45a112e24c), [`fd9dd2a`](https://github.com/heroui-inc/heroui/commit/fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1), [`a819f2a`](https://github.com/heroui-inc/heroui/commit/a819f2a95a32d059581b2789f2476c5e497732f2), [`bc4c982`](https://github.com/heroui-inc/heroui/commit/bc4c9826097a1014939b691425d30eff998d1e2e)]:
   - @heroui/theme@2.4.24
 
 ## 2.1.27

packages/components/input-otp/__tests__/input-otp.test.tsx

@@ -293,7 +293,7 @@ describe("InputOtp with react-hook-form", () => {
     expect(onSubmit).toHaveBeenCalledTimes(1);
   });
 
-  it("should work correctly wiht react-hook-form controller", async () => {
+  it("should work correctly with react-hook-form controller", async () => {
     const {result} = renderHook(() =>
       useForm({
         defaultValues: {

packages/components/input/src/textarea.tsx

@@ -24,7 +24,7 @@ export type TextareaHeightChangeMeta = {
 
 export interface TextAreaProps extends Omit<UseInputProps<HTMLTextAreaElement>, OmittedInputProps> {
   /**
-   * Whether the textarea should automatically grow vertically to accomodate content.
+   * Whether the textarea should automatically grow vertically to accommodate content.
    * @default false
    */
   disableAutosize?: boolean;

packages/components/table/CHANGELOG.md

@@ -4,9 +4,12 @@
 
 ### Patch Changes
 
+- [#5963](https://github.com/heroui-inc/heroui/pull/5963) [`b89ba08`](https://github.com/heroui-inc/heroui/commit/b89ba08ae06bf0140f0bc92f10e9a09c1484cdba) Thanks [@wingkwong](https://github.com/wingkwong)! - fix(table): virtualized table in firefox by replacing Spacer with css (#2108, #5479)
+
+- [#5950](https://github.com/heroui-inc/heroui/pull/5950) [`f08dfb8`](https://github.com/heroui-inc/heroui/commit/f08dfb8dd966e8a6f4b2407ab60e4e9d51821126) Thanks [@wingkwong](https://github.com/wingkwong)! - fix column props not recognized (#1667)
+
 - Updated dependencies []:
   - @heroui/checkbox@2.3.28
-  - @heroui/spacer@2.2.21
 
 ## 2.2.27
 

packages/components/table/package.json

@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {
@@ -44,7 +44,6 @@
     "@heroui/react-utils": "workspace:*",
     "@heroui/shared-icons": "workspace:*",
     "@heroui/shared-utils": "workspace:*",
-    "@heroui/spacer": "workspace:*",
     "@react-aria/focus": "3.21.2",
     "@react-aria/interactions": "3.25.6",
     "@react-aria/table": "3.17.8",

packages/components/table/src/table-column-header.tsx

@@ -35,6 +35,10 @@ export interface TableColumnHeaderProps<T = object> extends HTMLHeroUIProps<"th"
   node: GridNode<T>;
 }
 
+const normalizeWidth = (value: number | string): string => {
+  return typeof value === "number" ? `${value}px` : value;
+};
+
 const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref) => {
   const {as, className, state, node, slots, classNames, sortIcon, ...otherProps} = props;
 
@@ -49,10 +53,16 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
 
   const {isFocusVisible, focusProps} = useFocusRing();
   const {isHovered, hoverProps} = useHover({});
-  const {hideHeader, align, ...columnProps} = node.props;
+  const {hideHeader, align, width, minWidth, maxWidth, ...columnProps} = node.props;
 
   const allowsSorting = columnProps.allowsSorting;
 
+  const columnStyles: React.CSSProperties = {};
+
+  if (width) columnStyles.width = normalizeWidth(width);
+  if (minWidth) columnStyles.minWidth = normalizeWidth(minWidth);
+  if (maxWidth) columnStyles.maxWidth = normalizeWidth(maxWidth);
+
   const sortIconProps = {
     "aria-hidden": true,
     "data-direction": state.sortDescriptor?.direction,
@@ -72,6 +82,7 @@ const TableColumnHeader = forwardRef<"th", TableColumnHeaderProps>((props, ref)
       data-focus-visible={dataAttr(isFocusVisible)}
       data-hover={dataAttr(isHovered)}
       data-sortable={dataAttr(allowsSorting)}
+      style={columnStyles}
       {...mergeProps(
         columnHeaderProps,
         focusProps,

packages/components/table/src/table.tsx

@@ -1,7 +1,6 @@
 import type {UseTableProps} from "./use-table";
 
 import {useCallback} from "react";
-import {Spacer} from "@heroui/spacer";
 import {forwardRef} from "@heroui/system";
 
 import {useTable} from "./use-table";
@@ -111,7 +110,6 @@ const Table = forwardRef<"table", TableProps>((props, ref) => {
                   )}
                 </TableHeaderRow>
               ))}
-              <Spacer as="tr" tabIndex={-1} y={1} />
             </TableRowGroup>
             <TableBody
               checkboxesProps={values.checkboxesProps}

packages/components/table/src/virtualized-table.tsx

@@ -1,7 +1,6 @@
 import type {UseTableProps} from "./use-table";
 
 import {useCallback, useLayoutEffect, useRef, useState} from "react";
-import {Spacer} from "@heroui/spacer";
 import {forwardRef} from "@heroui/system";
 import {useVirtualizer} from "@tanstack/react-virtual";
 
@@ -128,7 +127,6 @@ const VirtualizedTable = forwardRef<"table", TableProps>((props, ref) => {
                   )}
                 </TableHeaderRow>
               ))}
-              <Spacer as="tr" tabIndex={-1} y={1} />
             </TableRowGroup>
             <VirtualizedTableBody
               checkboxesProps={values.checkboxesProps}

packages/components/tabs/CHANGELOG.md

@@ -8,6 +8,8 @@
 
 - [#5924](https://github.com/heroui-inc/heroui/pull/5924) [`5d9a05b`](https://github.com/heroui-inc/heroui/commit/5d9a05be01fea1a66ed47ec4b4d9a9a442560341) Thanks [@hasegawa-101](https://github.com/hasegawa-101)! - Fix vertical tabs to use correct aria-orientation and support Up/Down arrow navigation for accessibility. (#5810)
 
+- [#5846](https://github.com/heroui-inc/heroui/pull/5846) [`a819f2a`](https://github.com/heroui-inc/heroui/commit/a819f2a95a32d059581b2789f2476c5e497732f2) Thanks [@adbjo](https://github.com/adbjo)! - responsive tab cursor (#5943)
+
 ## 2.2.24
 
 ### Patch Changes

packages/components/tabs/__tests__/tabs.test.tsx

@@ -341,7 +341,7 @@ describe("Tabs", () => {
     expect(tabWrapper).toHaveAttribute("data-vertical", "horizontal");
   });
 
-  test("should destory inactive tab panels", () => {
+  test("should destroy inactive tab panels", () => {
     const {container} = render(
       <Tabs aria-label="Tabs test (destroyInactiveTabPanel=true)">
         <Tab key="tab1" data-testid="item1" title="Tab 1">
@@ -356,7 +356,7 @@ describe("Tabs", () => {
     expect(container.querySelectorAll("[data-slot='panel']")).toHaveLength(1);
   });
 
-  test("should not destory inactive tab panels", async () => {
+  test("should not destroy inactive tab panels", async () => {
     const wrapper = render(
       <Tabs aria-label="Tabs test (destroyInactiveTabPanel=false)" destroyInactiveTabPanel={false}>
         <Tab key="tab1" data-testid="item1" title="Tab 1">

packages/components/tabs/src/tabs.tsx

@@ -1,7 +1,7 @@
 import type {ForwardedRef, ReactElement} from "react";
 import type {UseTabsProps} from "./use-tabs";
 
-import {useRef, useMemo} from "react";
+import {useEffect, useCallback, useRef, useMemo} from "react";
 import {forwardRef} from "@heroui/system";
 
 import {useTabs} from "./use-tabs";
@@ -44,66 +44,105 @@ const Tabs = forwardRef(function Tabs<T extends object>(
     <Tab key={item.key} item={item} {...tabsProps} {...item.props} />
   ));
 
+  const variant = props?.variant;
+  const previousVariant = useRef<typeof variant>(undefined);
+  const isVertical = props?.isVertical;
+  const previousIsVertical = useRef<typeof isVertical>(undefined);
+  const placement = props?.placement;
+  const previousPlacement = useRef<typeof placement>(undefined);
+
+  const cursorRef = useRef<HTMLSpanElement | null>(null);
   const selectedItem = state.selectedItem;
   const selectedKey = selectedItem?.key;
-  const prevSelectedKey = useRef<typeof selectedKey>(undefined);
-  const prevVariant = useRef(props?.variant);
-  const variant = props?.variant;
-  const isVertical = props?.isVertical;
 
-  const getCursorStyles = (tabRect: DOMRect, relativeLeft: number, relativeTop: number) => {
-    const baseStyles = {
-      left: `${relativeLeft}px`,
-      width: `${tabRect.width}px`,
-    };
+  const getCursorStyles = useCallback(
+    (tabRect: DOMRect) => {
+      if (variant === "underlined") {
+        return {
+          left: `${tabRect.left + tabRect.width * 0.1}px`,
+          top: `${tabRect.top + tabRect.height - 2}px`,
+          width: `${tabRect.width * 0.8}px`,
+          height: "",
+        };
+      }
 
-    if (variant === "underlined") {
       return {
-        left: `${relativeLeft + tabRect.width * 0.1}px`,
-        top: `${relativeTop + tabRect.height - 2}px`,
-        width: `${tabRect.width * 0.8}px`,
-        height: "",
+        left: `${tabRect.left}px`,
+        top: `${tabRect.top}px`,
+        width: `${tabRect.width}px`,
+        height: `${tabRect.height}px`,
       };
-    }
+    },
+    [variant],
+  );
 
-    return {
-      ...baseStyles,
-      top: `${relativeTop}px`,
-      height: `${tabRect.height}px`,
-    };
-  };
+  const withAnimationReset = useCallback(
+    (callback: () => void) => {
+      if (
+        variant !== previousVariant.current ||
+        isVertical !== previousIsVertical.current ||
+        placement !== previousPlacement.current
+      ) {
+        cursorRef.current?.removeAttribute("data-animated");
+      }
+      callback();
+      previousVariant.current = variant;
+      previousIsVertical.current = isVertical;
+      previousPlacement.current = placement;
+      requestAnimationFrame(() => {
+        cursorRef.current?.setAttribute("data-animated", "true");
+        cursorRef.current?.setAttribute("data-initialized", "true");
+      });
+    },
+    [isVertical, variant, placement],
+  );
 
-  const updateCursorPosition = (node: HTMLSpanElement, selectedTab: HTMLElement) => {
-    const tabRect = {
-      width: selectedTab.offsetWidth,
-      height: selectedTab.offsetHeight,
-    } as DOMRect;
+  const updateCursorPosition = useCallback(
+    (selectedTab: HTMLElement) => {
+      if (!cursorRef.current) return;
 
-    const styles = getCursorStyles(tabRect, selectedTab.offsetLeft, selectedTab.offsetTop);
+      const tabRect = {
+        width: selectedTab.offsetWidth,
+        height: selectedTab.offsetHeight,
+        left: selectedTab.offsetLeft,
+        top: selectedTab.offsetTop,
+      } as DOMRect;
 
-    node.style.left = styles.left;
-    node.style.top = styles.top;
-    node.style.width = styles.width;
-    node.style.height = styles.height;
-  };
+      const styles = getCursorStyles(tabRect);
 
-  const handleCursorRef = (node: HTMLSpanElement | null) => {
-    if (!node) return;
+      withAnimationReset(() => {
+        cursorRef.current!.style.left = styles.left;
+        cursorRef.current!.style.top = styles.top;
+        cursorRef.current!.style.width = styles.width;
+        cursorRef.current!.style.height = styles.height;
+      });
+    },
+    [cursorRef.current, getCursorStyles, withAnimationReset],
+  );
 
-    const selectedTab = domRef.current?.querySelector(`[data-key="${selectedKey}"]`) as HTMLElement;
+  const onResize = useCallback(
+    (entries: ResizeObserverEntry[]) => {
+      const contentRect = entries[0].contentRect;
 
-    if (!selectedTab || !domRef.current) return;
+      // check if rendered
+      if (contentRect.width === 0 && contentRect.height === 0) return;
 
-    const shouldDisableTransition =
-      prevSelectedKey.current === undefined || prevVariant.current !== variant;
+      updateCursorPosition(entries[0].target as HTMLElement);
+    },
+    [updateCursorPosition],
+  );
 
-    node.style.transition = shouldDisableTransition ? "none" : "";
+  useEffect(() => {
+    const selectedTab = domRef.current?.querySelector(`[data-key="${selectedKey}"]`);
 
-    prevSelectedKey.current = selectedKey;
-    prevVariant.current = variant;
+    if (!selectedTab) return;
 
-    updateCursorPosition(node, selectedTab);
-  };
+    const observer = new ResizeObserver(onResize);
+
+    observer.observe(selectedTab);
+
+    return () => observer.disconnect();
+  }, [domRef.current, onResize, selectedKey]);
 
   const renderTabs = useMemo(
     () => (
@@ -111,7 +150,7 @@ const Tabs = forwardRef(function Tabs<T extends object>(
         <div {...getBaseProps()}>
           <Component {...getTabListProps()}>
             {!values.disableAnimation && !values.disableCursorAnimation && selectedKey != null && (
-              <span {...getTabCursorProps()} ref={handleCursorRef} />
+              <span {...getTabCursorProps()} ref={cursorRef} />
             )}
             {tabs}
           </Component>
@@ -145,6 +184,7 @@ const Tabs = forwardRef(function Tabs<T extends object>(
       values.state,
       destroyInactiveTabPanel,
       domRef,
+      cursorRef,
       variant,
       isVertical,
     ],

packages/components/toast/stories/toast.stories.tsx

@@ -309,8 +309,8 @@ const CustomToastComponent = (args) => {
         variant="bordered"
         onPress={() => {
           addToast({
-            title: "Sucessful!",
-            description: "Document uploaded to cloud successful.",
+            title: "Successful!",
+            description: "Document uploaded to cloud successfully.",
             classNames: {
               base: cn([
                 "bg-default-50 dark:bg-background shadow-sm",

packages/core/react/CHANGELOG.md

@@ -4,10 +4,11 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`bdd37b4`](https://github.com/heroui-inc/heroui/commit/bdd37b4b08cc12dc3c93f031aa639148257d06d6), [`b4cfb40`](https://github.com/heroui-inc/heroui/commit/b4cfb408e963c1131ea3beb58aac7821a0ef52a9), [`8921dc4`](https://github.com/heroui-inc/heroui/commit/8921dc4361f7cdb8cbce755e8b90fdd799b668da), [`ce0c298`](https://github.com/heroui-inc/heroui/commit/ce0c2987859a3fe0adc831eaef81ab018edadc11), [`b38a2cf`](https://github.com/heroui-inc/heroui/commit/b38a2cfb58feb79b3baff10eff19e21480da1563), [`2922b35`](https://github.com/heroui-inc/heroui/commit/2922b35644d8136d593ce08cccf9c78c08d00e0f), [`1782961`](https://github.com/heroui-inc/heroui/commit/17829618591d723beea665a7c56d9c45a112e24c), [`5d9a05b`](https://github.com/heroui-inc/heroui/commit/5d9a05be01fea1a66ed47ec4b4d9a9a442560341), [`91e010f`](https://github.com/heroui-inc/heroui/commit/91e010fe3bd8e49653bd53c47e9955d8b11c1db2), [`0825f88`](https://github.com/heroui-inc/heroui/commit/0825f88cd2bfd1b6638a23b8d21f8812576f84a7), [`fd9dd2a`](https://github.com/heroui-inc/heroui/commit/fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1), [`66ef76e`](https://github.com/heroui-inc/heroui/commit/66ef76e823ed6329b1d2e3c3b9d83721db12fdcf), [`bc4c982`](https://github.com/heroui-inc/heroui/commit/bc4c9826097a1014939b691425d30eff998d1e2e), [`4fa5453`](https://github.com/heroui-inc/heroui/commit/4fa54534b2596ca2e46c69945c34894d1da14fab)]:
+- Updated dependencies [[`bdd37b4`](https://github.com/heroui-inc/heroui/commit/bdd37b4b08cc12dc3c93f031aa639148257d06d6), [`b89ba08`](https://github.com/heroui-inc/heroui/commit/b89ba08ae06bf0140f0bc92f10e9a09c1484cdba), [`b4cfb40`](https://github.com/heroui-inc/heroui/commit/b4cfb408e963c1131ea3beb58aac7821a0ef52a9), [`8921dc4`](https://github.com/heroui-inc/heroui/commit/8921dc4361f7cdb8cbce755e8b90fdd799b668da), [`f08dfb8`](https://github.com/heroui-inc/heroui/commit/f08dfb8dd966e8a6f4b2407ab60e4e9d51821126), [`ce0c298`](https://github.com/heroui-inc/heroui/commit/ce0c2987859a3fe0adc831eaef81ab018edadc11), [`b38a2cf`](https://github.com/heroui-inc/heroui/commit/b38a2cfb58feb79b3baff10eff19e21480da1563), [`2922b35`](https://github.com/heroui-inc/heroui/commit/2922b35644d8136d593ce08cccf9c78c08d00e0f), [`1782961`](https://github.com/heroui-inc/heroui/commit/17829618591d723beea665a7c56d9c45a112e24c), [`5d9a05b`](https://github.com/heroui-inc/heroui/commit/5d9a05be01fea1a66ed47ec4b4d9a9a442560341), [`91e010f`](https://github.com/heroui-inc/heroui/commit/91e010fe3bd8e49653bd53c47e9955d8b11c1db2), [`0825f88`](https://github.com/heroui-inc/heroui/commit/0825f88cd2bfd1b6638a23b8d21f8812576f84a7), [`fd9dd2a`](https://github.com/heroui-inc/heroui/commit/fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1), [`66ef76e`](https://github.com/heroui-inc/heroui/commit/66ef76e823ed6329b1d2e3c3b9d83721db12fdcf), [`a819f2a`](https://github.com/heroui-inc/heroui/commit/a819f2a95a32d059581b2789f2476c5e497732f2), [`bc4c982`](https://github.com/heroui-inc/heroui/commit/bc4c9826097a1014939b691425d30eff998d1e2e), [`4fa5453`](https://github.com/heroui-inc/heroui/commit/4fa54534b2596ca2e46c69945c34894d1da14fab)]:
   - @heroui/number-input@2.0.19
-  - @heroui/autocomplete@2.3.30
+  - @heroui/table@2.2.28
   - @heroui/theme@2.4.24
+  - @heroui/autocomplete@2.3.30
   - @heroui/tabs@2.2.25
   - @heroui/spinner@2.2.25
   - @heroui/ripple@2.2.21
@@ -17,7 +18,6 @@
   - @heroui/link@2.2.24
   - @heroui/skeleton@2.2.18
   - @heroui/radio@2.3.28
-  - @heroui/modal@2.2.24
   - @heroui/accordion@2.2.24
   - @heroui/alert@2.2.28
   - @heroui/avatar@2.2.22
@@ -39,6 +39,7 @@
   - @heroui/kbd@2.2.22
   - @heroui/listbox@2.3.26
   - @heroui/menu@2.2.26
+  - @heroui/modal@2.2.24
   - @heroui/navbar@2.2.25
   - @heroui/pagination@2.2.24
   - @heroui/popover@2.3.28
@@ -48,7 +49,6 @@
   - @heroui/snippet@2.2.29
   - @heroui/spacer@2.2.21
   - @heroui/switch@2.2.24
-  - @heroui/table@2.2.28
   - @heroui/toast@2.0.18
   - @heroui/tooltip@2.2.24
   - @heroui/user@2.2.22

packages/core/theme/CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Patch Changes
 
+- [#5963](https://github.com/heroui-inc/heroui/pull/5963) [`b89ba08`](https://github.com/heroui-inc/heroui/commit/b89ba08ae06bf0140f0bc92f10e9a09c1484cdba) Thanks [@wingkwong](https://github.com/wingkwong)! - fix(table): virtualized table in firefox by replacing Spacer with css (#2108, #5479)
+
 - [#5909](https://github.com/heroui-inc/heroui/pull/5909) [`8921dc4`](https://github.com/heroui-inc/heroui/commit/8921dc4361f7cdb8cbce755e8b90fdd799b668da) Thanks [@hasegawa-101](https://github.com/hasegawa-101)! - fix Safari autofill styling for dark mode readability in NumberInput & Input components (#4657)
 
 - [#5816](https://github.com/heroui-inc/heroui/pull/5816) [`b38a2cf`](https://github.com/heroui-inc/heroui/commit/b38a2cfb58feb79b3baff10eff19e21480da1563) Thanks [@wingkwong](https://github.com/wingkwong)! - fix tab cursor (#5790, #5809)
@@ -12,6 +14,8 @@
 
 - [#5893](https://github.com/heroui-inc/heroui/pull/5893) [`fd9dd2a`](https://github.com/heroui-inc/heroui/commit/fd9dd2a20c30beb4f46a8a6ab5d654ec7b9dbec1) Thanks [@hasegawa-101](https://github.com/hasegawa-101)! - Fix bordered focus styles overridden by hover styles (#5585)
 
+- [#5846](https://github.com/heroui-inc/heroui/pull/5846) [`a819f2a`](https://github.com/heroui-inc/heroui/commit/a819f2a95a32d059581b2789f2476c5e497732f2) Thanks [@adbjo](https://github.com/adbjo)! - responsive tab cursor (#5943)
+
 - [#5916](https://github.com/heroui-inc/heroui/pull/5916) [`bc4c982`](https://github.com/heroui-inc/heroui/commit/bc4c9826097a1014939b691425d30eff998d1e2e) Thanks [@hasegawa-101](https://github.com/hasegawa-101)! - fixed skeleton shimmer animation not respecting disableAnimation prop (#5915)
 
 ## 2.4.23

packages/core/theme/src/components/table.ts

@@ -54,7 +54,7 @@ const table = tv({
       "overflow-auto",
     ],
     table: "min-w-full h-auto",
-    thead: "[&>tr]:first:rounded-lg",
+    thead: "[&>tr]:first:rounded-lg after:content-[''] after:table-row after:h-[5px]",
     tbody: "after:block",
     tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
     th: [

packages/core/theme/src/components/tabs.ts

@@ -69,9 +69,11 @@ const tabs = tv({
       "z-0",
       "bg-white",
       "will-change-[transform,width,height]",
-      "transition-[left,top,width,height]",
-      "duration-250",
-      "ease-out",
+      "invisible",
+      "data-[initialized=true]:visible",
+      "data-[animated=true]:transition-[left,top,width,height]",
+      "data-[animated=true]:duration-250",
+      "data-[animated=true]:ease-out",
     ],
     panel: [
       "py-3",

pnpm-lock.yaml

@@ -2695,9 +2695,6 @@ importers:
       '@heroui/shared-utils':
         specifier: workspace:*
         version: link:../../utilities/shared-utils
-      '@heroui/spacer':
-        specifier: workspace:*
-        version: link:../spacer
       '@react-aria/focus':
         specifier: 3.21.2
         version: 3.21.2(react-dom@18.3.0(react@18.3.0))(react@18.3.0)