feat: tailwind variants upgrade (#4386)

* feat: tailwind variants upgrade * chore: restore npmrc * chore: adjust pkgs * fix: versions * fix: lock file * chore(changeset): update package name * chore(deps): use fixed version * fix(test): incorrect package name --------- Co-authored-by: աӄա <[email protected]>
heroui-inc · Jan 30, 2025 · 69aa476 · 69aa476
1 parent 3d9b600
commit 69aa476
Show file tree

Hide file tree

Showing 105 changed files with 2,807 additions and 2,302 deletions.
diff --git a/.changeset/stupid-pants-perform.md b/.changeset/stupid-pants-perform.md
@@ -0,0 +1,84 @@
+---
+"@heroui/use-intersection-observer": patch
+"@heroui/use-data-scroll-overflow": patch
+"@heroui/use-aria-accordion-item": patch
+"@heroui/use-aria-modal-overlay": patch
+"@heroui/use-safe-layout-effect": patch
+"@heroui/use-aria-multiselect": patch
+"@heroui/use-infinite-scroll": patch
+"@heroui/use-scroll-position": patch
+"@heroui/react-rsc-utils": patch
+"@heroui/scroll-shadow": patch
+"@heroui/use-aria-accordion": patch
+"@heroui/autocomplete": patch
+"@heroui/use-update-effect": patch
+"@heroui/breadcrumbs": patch
+"@heroui/date-picker": patch
+"@heroui/use-callback-ref": patch
+"@heroui/framer-utils": patch
+"@heroui/shared-icons": patch
+"@heroui/date-input": patch
+"@heroui/pagination": patch
+"@heroui/use-aria-button": patch
+"@heroui/react-utils": patch
+"@heroui/accordion": patch
+"@heroui/input-otp": patch
+"@heroui/use-disclosure": patch
+"@heroui/use-is-mounted": patch
+"@heroui/use-pagination": patch
+"@heroui/use-real-shape": patch
+"@heroui/aria-utils": patch
+"@heroui/test-utils": patch
+"@heroui/calendar": patch
+"@heroui/checkbox": patch
+"@heroui/dropdown": patch
+"@heroui/progress": patch
+"@heroui/skeleton": patch
+"@heroui/use-aria-link": patch
+"@heroui/use-clipboard": patch
+"@heroui/use-draggable": patch
+"@heroui/use-is-mobile": patch
+"@heroui/use-ref-state": patch
+"@heroui/divider": patch
+"@heroui/listbox": patch
+"@heroui/popover": patch
+"@heroui/snippet": patch
+"@heroui/spinner": patch
+"@heroui/tooltip": patch
+"@heroui/avatar": patch
+"@heroui/button": patch
+"@heroui/drawer": patch
+"@heroui/navbar": patch
+"@heroui/ripple": patch
+"@heroui/select": patch
+"@heroui/slider": patch
+"@heroui/spacer": patch
+"@heroui/switch": patch
+"@heroui/use-measure": patch
+"@heroui/alert": patch
+"@heroui/badge": patch
+"@heroui/image": patch
+"@heroui/input": patch
+"@heroui/modal": patch
+"@heroui/radio": patch
+"@heroui/table": patch
+"@heroui/use-resize": patch
+"@heroui/card": patch
+"@heroui/chip": patch
+"@heroui/code": patch
+"@heroui/form": patch
+"@heroui/link": patch
+"@heroui/menu": patch
+"@heroui/tabs": patch
+"@heroui/user": patch
+"@heroui/system-rsc": patch
+"@heroui/use-image": patch
+"@heroui/use-theme": patch
+"@heroui/kbd": patch
+"@heroui/use-ssr": patch
+"@heroui/system": patch
+"@heroui/react": patch
+"@heroui/theme": patch
+---
+
+Tailwind variants upgraded to the latest version, classnames adjusted, tests fixed
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -78,8 +78,8 @@
     "posthog-js": "1.197.0",
     "prism-react-renderer": "^1.2.1",
     "querystring": "^0.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-hook-form": "^7.51.3",
     "react-icons": "^4.10.1",
     "react-live": "^4.1.8",
@@ -97,7 +97,7 @@
     "sharp": "^0.32.1",
     "shelljs": "^0.8.4",
     "swr": "2.2.5",
-    "tailwind-variants": "^0.1.20",
+    "tailwind-variants": "^0.3.0",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
     "usehooks-ts": "3.1.0",
@@ -126,8 +126,8 @@
     "algoliasearch": "^4.10.3",
     "autoprefixer": "10.4.20",
     "dotenv": "^16.0.1",
-    "esbuild-plugin-raw": "0.1.8",
     "eslint-config-next": "15.0.3",
+    "esbuild-plugin-raw": "0.1.8",
     "markdown-toc": "^1.2.0",
     "mdx-bundler": "10.0.3",
     "next-sitemap": "4.2.3",
@@ -141,8 +141,8 @@
   },
   "pnpm": {
     "overrides": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
+      "react": "18.3.0",
+      "react-dom": "18.3.0"
     }
   }
 }
diff --git a/package.json b/package.json
@@ -62,10 +62,10 @@
     "@babel/preset-env": "^7.14.5",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@changesets/cli": "2.27.10",
     "@changesets/changelog-github": "0.5.0",
-    "@changesets/get-release-plan": "4.0.5",
+    "@changesets/cli": "2.27.10",
     "@changesets/get-github-info": "0.6.0",
+    "@changesets/get-release-plan": "4.0.5",
     "@changesets/types": "6.0.0",
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
@@ -127,23 +127,22 @@
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "18.3.0",
     "rimraf": "^3.0.2",
     "shelljs": "^0.8.4",
-    "tsup": "6.4.0",
-    "tsx": "^3.8.2",
+    "tsup": "8.3.5",
+    "tsx": "^4.19.2",
     "turbo": "1.6.3",
-    "typescript": "^4.9.5",
+    "typescript": "^5.5.0",
     "webpack": "^5.53.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^3.3.11",
     "webpack-merge": "^5.8.0"
   },
   "pnpm": {
     "overrides": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0",
+      "react": "18.3.0",
+      "react-dom": "18.3.0",
       "@changesets/get-github-info": "0.6.0"
     }
   },

diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx
@@ -1,15 +1,12 @@
+import "@testing-library/jest-dom";
 import * as React from "react";
 import {act, render} from "@testing-library/react";
-import {focus} from "@heroui/test-utils";
+import {focus, shouldIgnoreReactWarning, spy} from "@heroui/test-utils";
 import userEvent, {UserEvent} from "@testing-library/user-event";
 import {Input} from "@heroui/input";
 
 import {Accordion, AccordionItem} from "../src";
 
-// e.g. console.error Warning: Function components cannot be given refs.
-// Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
-const spy = jest.spyOn(console, "error").mockImplementation(() => {});
-
 describe("Accordion", () => {
   let user: UserEvent;
 
@@ -30,6 +27,10 @@ describe("Accordion", () => {
 
     expect(() => wrapper.unmount()).not.toThrow();
 
+    if (shouldIgnoreReactWarning(spy)) {
+      return;
+    }
+
     expect(spy).toHaveBeenCalledTimes(0);
   });
 

diff --git a/packages/components/accordion/package.json b/packages/components/accordion/package.json
@@ -72,8 +72,8 @@
     "@heroui/test-utils": "workspace:*",
     "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/alert/package.json b/packages/components/alert/package.json
@@ -55,8 +55,8 @@
     "@heroui/system": "workspace:*",
     "@heroui/theme": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -2,6 +2,7 @@ import "@testing-library/jest-dom";
 import * as React from "react";
 import {within, render, renderHook, act} from "@testing-library/react";
 import userEvent, {UserEvent} from "@testing-library/user-event";
+import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
 import {useForm} from "react-hook-form";
 import {Form} from "@heroui/form";
 
@@ -88,6 +89,11 @@ describe("Autocomplete", () => {
   it("should render correctly", () => {
     const wrapper = render(<AutocompleteExample />);
 
+    if (shouldIgnoreReactWarning(spy)) {
+      return;
+    }
+
+    expect(spy).toHaveBeenCalledTimes(0);
     expect(() => wrapper.unmount()).not.toThrow();
   });
 

diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json
@@ -68,14 +68,15 @@
     "@heroui/avatar": "workspace:*",
     "@heroui/chip": "workspace:*",
     "@heroui/stories-utils": "workspace:*",
+    "@heroui/test-utils": "workspace:*",
     "@heroui/system": "workspace:*",
     "@heroui/theme": "workspace:*",
     "@heroui/use-infinite-scroll": "workspace:*",
     "@react-stately/data": "3.12.1",
     "clean-package": "2.2.0",
     "framer-motion": "11.9.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"

diff --git a/packages/components/avatar/package.json b/packages/components/avatar/package.json
@@ -53,8 +53,8 @@
     "@heroui/shared-icons": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/badge/package.json b/packages/components/badge/package.json
@@ -50,8 +50,8 @@
     "@heroui/shared-icons": "workspace:*",
     "@heroui/switch": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/breadcrumbs/package.json b/packages/components/breadcrumbs/package.json
@@ -56,8 +56,8 @@
     "@heroui/tooltip": "workspace:*",
     "@heroui/button": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/button/package.json b/packages/components/button/package.json
@@ -59,8 +59,8 @@
     "@heroui/shared-icons": "workspace:*",
     "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/calendar/package.json b/packages/components/calendar/package.json
@@ -70,8 +70,8 @@
     "@heroui/test-utils": "workspace:*",
     "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/card/package.json b/packages/components/card/package.json
@@ -61,8 +61,8 @@
     "@heroui/image": "workspace:*",
     "framer-motion": "11.9.0",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/checkbox/package.json b/packages/components/checkbox/package.json
@@ -63,8 +63,8 @@
     "@heroui/theme": "workspace:*",
     "@heroui/user": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "18.3.0",
+    "react-dom": "18.3.0",
     "react-hook-form": "^7.51.3"
   },
   "clean-package": "../../../clean-package.config.json"

diff --git a/packages/components/chip/package.json b/packages/components/chip/package.json
@@ -53,8 +53,8 @@
     "@heroui/system": "workspace:*",
     "@heroui/avatar": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/code/__tests__/code.test.tsx b/packages/components/code/__tests__/code.test.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import {render} from "@testing-library/react";
+import {spy, shouldIgnoreReactWarning} from "@heroui/test-utils";
 
 import {Code} from "../src";
 
@@ -8,6 +9,12 @@ describe("Code", () => {
     const wrapper = render(<Code />);
 
     expect(() => wrapper.unmount()).not.toThrow();
+
+    if (shouldIgnoreReactWarning(spy)) {
+      return;
+    }
+
+    expect(spy).toHaveBeenCalledTimes(0);
   });
 
   it("ref should be forwarded", () => {

diff --git a/packages/components/code/package.json b/packages/components/code/package.json
@@ -45,9 +45,10 @@
   },
   "devDependencies": {
     "@heroui/theme": "workspace:*",
+    "@heroui/test-utils": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }
diff --git a/packages/components/date-input/package.json b/packages/components/date-input/package.json
@@ -57,8 +57,8 @@
     "@heroui/shared-icons": "workspace:*",
     "@heroui/test-utils": "workspace:*",
     "clean-package": "2.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "18.3.0",
+    "react-dom": "18.3.0"
   },
   "clean-package": "../../../clean-package.config.json"
 }