[Security] Fix MEDIUM vulnerability: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal

.changeset/brave-laws-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@heroui/number-input": patch
+---
+
+allow inheriting labelPlacement from HeroUIProvider (#5845)

.changeset/famous-panthers-rush.md

@@ -0,0 +1,6 @@
+---
+"@heroui/tabs": patch
+"@heroui/theme": patch
+---
+
+fix tab cursor (#5790, #5809)

.changeset/four-candles-applaud.md

@@ -0,0 +1,5 @@
+---
+"@heroui/autocomplete": patch
+---
+
+fix close button display in autocomplete on mobile (#5826)

.changeset/large-wasps-decide.md

@@ -0,0 +1,6 @@
+---
+"@heroui/spinner": patch
+"@heroui/theme": patch
+---
+
+Fix spinner animation (#5794)

.changeset/odd-jobs-vanish.md

@@ -0,0 +1,5 @@
+---
+"@heroui/ripple": patch
+---
+
+fix resolve misalignment in RTL layouts by using transform translate (#5858)

.changeset/popular-fishes-camp.md

@@ -0,0 +1,8 @@
+---
+"@heroui/button": patch
+"@heroui/select": patch
+"@heroui/input": patch
+"@heroui/theme": patch
+---
+
+Fix bordered focus styles overridden by hover styles (#5585)

apps/docs/components/docs/components/codeblock.tsx

@@ -124,16 +124,10 @@ const CodeBlockHighlight = ({
                   preRef.current = element;
                 }
               }}
-              className={clsx(
-                className,
-                classNameProp,
-                `language-${codeLang}`,
-                "max-w-full contents",
-                {
-                  "flex-col": isMultiLine,
-                  "overflow-x-scroll scrollbar-hide": hideScrollBar,
-                },
-              )}
+              className={clsx(className, classNameProp, `language-${codeLang}`, "max-w-full", {
+                "flex-col": isMultiLine,
+                "overflow-x-scroll scrollbar-hide": hideScrollBar,
+              })}
               data-language={language}
               style={style}
             >

apps/docs/components/docs/toc.tsx

@@ -87,9 +87,10 @@ export const DocsToc: FC<DocsTocProps> = ({headings}) => {
                 <li
                   key={i}
                   className={clsx(
+                    "relative",
                     "transition-colors",
                     "font-normal",
-                    "flex items-center text-tiny font-normal text-default-500 dark:text-default-300",
+                    "flex items-center text-tiny font-normal text-default-500",
                     "data-[active=true]:text-foreground",
                     "dark:data-[active=true]:text-foreground",
                     "before:content-['']",

apps/docs/components/themes/constants.ts

@@ -39,7 +39,7 @@ export const initialLightTheme: ConfigColors = {
     foreground: colors.black,
     background: colors.white,
     focus: colors.blue[500],
-    overlay: colors.black,
+    overlay: colors.white,
   },
   contentColor: {
     content1: colors.white,
@@ -64,7 +64,7 @@ export const initialDarkTheme: ConfigColors = {
     foreground: colors.white,
     background: colors.black,
     focus: colors.blue[500],
-    overlay: colors.white,
+    overlay: colors.black,
   },
   contentColor: {
     content1: colors.zinc[900],

apps/docs/components/themes/templates/coffee.ts

@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const coffee: Config = {
   name: "coffee",
@@ -20,7 +18,7 @@ export const coffee: Config = {
     layoutColor: {
       foreground: "#a27225",
       background: "#fffbf6",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#db924b",
     },
     contentColor: {
@@ -45,7 +43,7 @@ export const coffee: Config = {
       foreground: "#c59f60",
       background: "#20161F",
       focus: "#db924b",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
     },
     contentColor: {
       content1: "#2c1f2b",

apps/docs/components/themes/templates/elegant.ts

@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const elegant: Config = {
   name: "elegant",
@@ -20,7 +18,7 @@ export const elegant: Config = {
     layoutColor: {
       foreground: "#4a4a4a",
       background: "#ffffff",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#db924b",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const elegant: Config = {
     layoutColor: {
       foreground: "#b0b0b0",
       background: "#000000",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#000000",
     },
     contentColor: {

apps/docs/components/themes/templates/modern.ts

@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const modern: Config = {
   name: "modern",
@@ -20,7 +18,7 @@ export const modern: Config = {
     layoutColor: {
       foreground: "#4a3d77",
       background: "#f9f7fd",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#7828c8",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const modern: Config = {
     layoutColor: {
       foreground: "#d0aaff",
       background: "#1b1526",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#9353d3",
     },
     contentColor: {

apps/docs/components/themes/templates/retro.ts

@@ -1,8 +1,6 @@
 import type {Config} from "../types";
 
-import {colors} from "@heroui/theme";
-
-import {initialLayout} from "../constants";
+import {initialDarkTheme, initialLayout, initialLightTheme} from "../constants";
 
 export const retro: Config = {
   name: "retro",
@@ -20,7 +18,7 @@ export const retro: Config = {
     layoutColor: {
       foreground: "#5A4A42",
       background: "#F4E8D1",
-      overlay: colors.black,
+      overlay: initialLightTheme.layoutColor.overlay,
       focus: "#FFD34E",
     },
     contentColor: {
@@ -44,7 +42,7 @@ export const retro: Config = {
     layoutColor: {
       foreground: "#000000",
       background: "#E1CA9E",
-      overlay: colors.white,
+      overlay: initialDarkTheme.layoutColor.overlay,
       focus: "#FFD34E",
     },
     contentColor: {

apps/docs/content/components/table/virtualization-custom-max-table-height.raw.jsx

@@ -1,4 +1,4 @@
-import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react";
 
 function generateRows(count) {
   return Array.from({length: count}, (_, index) => ({

apps/docs/content/components/table/virtualization-custom-row-height.raw.jsx

@@ -1,4 +1,4 @@
-import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react";
 
 function generateRows(count) {
   return Array.from({length: count}, (_, index) => ({

apps/docs/content/components/table/virtualization-ten-thousand.raw.jsx

@@ -1,4 +1,4 @@
-import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react";
 
 function generateRows(count) {
   return Array.from({length: count}, (_, index) => ({

apps/docs/content/components/table/virtualization.raw.jsx

@@ -1,4 +1,4 @@
-import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@nextui-org/react";
+import {Table, TableBody, TableCell, TableColumn, TableHeader, TableRow} from "@heroui/react";
 
 function generateRows(count) {
   return Array.from({length: count}, (_, index) => ({

packages/components/autocomplete/src/use-autocomplete.ts

@@ -154,9 +154,11 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
   const isClearable =
     originalProps.disableClearable !== undefined
       ? !originalProps.disableClearable
-      : originalProps.isReadOnly
+      : originalProps.isDisabled
         ? false
-        : originalProps.isClearable;
+        : originalProps.isReadOnly
+          ? false
+          : originalProps.isClearable;
 
   const {
     ref,

packages/components/input/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.19",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {

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

@@ -5,6 +5,7 @@ import {render, fireEvent, act} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
 import {Form} from "@heroui/form";
+import {HeroUIProvider} from "@heroui/system";
 
 import {NumberInput} from "../src";
 
@@ -680,4 +681,32 @@ describe("NumberInput with React Hook Form", () => {
       });
     });
   });
+
+  describe("NumberInput with HeroUIProvider context", () => {
+    it("should inherit labelPlacement from HeroUIProvider", () => {
+      const {container} = render(
+        <HeroUIProvider labelPlacement="outside">
+          <NumberInput label="Test number input" />
+        </HeroUIProvider>,
+      );
+
+      const label = container.querySelector("label");
+
+      expect(label).toBeTruthy();
+      expect(label?.className).toMatch(/translate-y.*100%/);
+    });
+
+    it("should prioritize labelPlacement prop over HeroUIProvider context", () => {
+      const {container} = render(
+        <HeroUIProvider labelPlacement="outside">
+          <NumberInput label="Test number input" labelPlacement="inside" />
+        </HeroUIProvider>,
+      );
+
+      const label = container.querySelector("label");
+
+      expect(label).toBeTruthy();
+      expect(label?.className).not.toMatch(/translate-y.*100%/);
+    });
+  });
 });

packages/components/number-input/package.json

@@ -39,7 +39,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/system": ">=2.4.18",
-    "@heroui/theme": ">=2.4.19"
+    "@heroui/theme": ">=2.4.23"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",

packages/components/number-input/src/use-number-input.ts

@@ -234,10 +234,18 @@ export function useNumberInput(originalProps: UseNumberInputProps) {
       numberInput({
         ...variantProps,
         isInvalid,
+        labelPlacement,
         isClearable,
         disableAnimation,
       }),
-    [objectToDeps(variantProps), isInvalid, isClearable, hasStartContent, disableAnimation],
+    [
+      objectToDeps(variantProps),
+      isInvalid,
+      labelPlacement,
+      isClearable,
+      hasStartContent,
+      disableAnimation,
+    ],
   );
 
   const handleKeyDown = useCallback(

packages/components/ripple/src/ripple.tsx

@@ -28,10 +28,16 @@ const Ripple: FC<RippleProps> = (props) => {
           <LazyMotion key={ripple.key} features={domAnimation}>
             <AnimatePresence mode="popLayout">
               <m.span
-                animate={{transform: "scale(2)", opacity: 0}}
+                animate={{
+                  transform: `translate(${ripple.x}px, ${ripple.y}px) scale(2)`,
+                  opacity: 0,
+                }}
                 className="heroui-ripple"
                 exit={{opacity: 0}}
-                initial={{transform: "scale(0)", opacity: 0.35}}
+                initial={{
+                  transform: `translate(${ripple.x}px, ${ripple.y}px) scale(0)`,
+                  opacity: 0.35,
+                }}
                 style={{
                   position: "absolute",
                   backgroundColor: color,
@@ -41,8 +47,6 @@ const Ripple: FC<RippleProps> = (props) => {
                   overflow: "hidden",
                   inset: 0,
                   zIndex: 0,
-                  top: ripple.y,
-                  left: ripple.x,
                   width: `${ripple.size}px`,
                   height: `${ripple.size}px`,
                   ...style,

packages/components/select/package.json

@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@heroui/system": ">=2.4.18",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.23",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"

packages/components/spinner/package.json

@@ -38,7 +38,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"
   },
   "dependencies": {
     "@heroui/system-rsc": "workspace:*",

packages/components/tabs/package.json

@@ -37,7 +37,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
-    "@heroui/theme": ">=2.4.22",
+    "@heroui/theme": ">=2.4.23",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {